Wymagania są jak zmienne

Czas płynie, woda płynie, wymagania się zmieniają, wartości walidacji też. Angular dostarcza swoje walidatory dla formularzy, które działają dobrze, jednak czasem biznes chce więcej i trzeba się dostosować. Z racji tego, że bardzo mi się to podobało, to jak to działa i co można chce się tym podzielić.

Widok

Do zbudowania korzystałem z następującego kodu:

Wyświetli to prostą tabelę, gdzie można wpisać tekst, ostatnie pole będzie służyć za ogranicznik wartości; jest także opcja klonowania wierszy, ostatnie pole będzie walidowane przeciwko temu z pierwszego wiersza:

Implementacja

Teraz zaglądamy w kod:

Klasyczny komponent, gdzie w konstruktorze tworzę grupę dla formularza, oraz pustą tablicę elementów, do której będę wrzucać nowe dynamiczne elementy (po kliknięciu ‘add‘)
Następnie w ngOnInit zapinam się na zmiany w polu mxRange, ponieważ chce, aby zmiany w ograniczniku wpływały na moje pola finish — wykorzystuje do tego funkcje `updateValueAndValidity` .
OnAdd to stworzenie nowego wpisu i dodanie go do listy.
getValidatioError — zwraca ewentualne błędy formularza.

Ważny kawałek kodu to `getSample` który tworzy wpis dla tablicy oraz ustawia walidatory, szczególnie ten dla `finish` ponieważ tam przekazuje funkcję do walidacji — tylko w ten sposób (mi znany) mogę mieć wpływ na to, aby wartości przy walidacji były dynamicznie zmienianie. Zwróć uwagę, że wartość przekazane jest odczytywana z formularza.

Walidator

Sama implementacja validatora wygląda tak:

Wykorzystana jest fabryka, aby zwrócić walidator.
Jako argument przyjmowany jest interface, którego wywołanie zwraca wartość numeryczną;
W międzyczasie parsuje także wartości z tekstu na wartość liczbową, wreszcie waliduje i zwracam null gdy jest ok, oraz `validateMinDate` obiekt gdy coś jest nie po mojej myśli — zauważ, że zwracam wartość od walidatora (min) – tutaj wszystko zależy od tego co i jak chcesz wyświetlić.

Czemu od razu nie korzystam z number, tylko walczę ze string? Taki przypadek, u Ciebie może być lepiej i może kontrolka będzie posiadała wartość jako liczbę, wtedy nie musisz jej parsować.

Akcja

Tak wygląda wynik finalny: