Potrzebuję wykonać funkcjonalność w angular 4, która dynamicznie generuje inputy (głównie selecty i checkboxy) na podstawie json, zbiera dane i odsyła na serwer oczywiście i mam problem z bindowaniem danych do modelu.
Flow jest taki, przy edycji przychodzą 2 modele. Model docelowy(poprzednio zapisany stan formularza oraz bedzie z powrotem wysyłany na backend) oraz drugi to dane na podstawie, których generowane są inputy (dostępne opcje selectów, walidacja itp.), generuje je w templatce z *ngFor.
Model danych docelowych z danymi do generacji nie zawsze będzie się zgadzał ponieważ wiele pól jest opcjonalnych.
Json, który jest wymieniany z backendem ma postać tablicy atrybutów i tak też wygląda model:
{
"attributes": [
{"code": "typeOfAttribute", "value":"valOfAttr"},
.... itd
]
}
Model do generacji pól wyglada podobnie tylko dany atrybut ma do wyboru wiele wartości (jest selectem) plus potem są property z walidacją itd.
dochodząc do sedna problemu to nie mogę dla [(ngModel)]="" znaleźć odpowiedniego elemntu tablicy. Niestety ponieważ pola są opcjonalne i kolejność nie jest zachowana to indeksy wybranych typów atrybutów w 2 modelach są różne, a generuje nie po docelowym modelu, więc nie znam indeksu. Wyszukać muszę po wartości property obiektów "code", niestety w templatce html, nie mogę takiej logiki filtrującej umieścić jak i również nie da się albo nie umiem umieścić metody z ts w templacte aby za każdym razem znajdowała odpowiedni indeks, nie pisząc przy ym różnyc przypadków wywołań. Wymyśliłem, aby zrobić model pośredni w postaci mapy, czyli listę obiektów przerobić na mapę klucz wartość:
{
code: "typeOfAttr",
value: "valOfAttr"
}
// na :
attrMap: Map<string,string> = new Map();
// iteruję listę i dla każdej:
attrMap.set("code", "value");
Wtedy dostęp bym miał [(ngModel)]="attrMap.get(code)"
Przy submicie Mapa będzie z powortem przerabiana na docelowy model.
Czy tak można w Mapie można bindować model? Czy to ma sens, czy jest jakieś prostsze rozwiązanie?