ANGULAR 2 VALIDATION SERVICE – usprawniamy wyświetlanie errorów

Cześć po 2 tygodniowej przerwie! W poprzednich artykułach pokazałem jak wyświetlać błędy walidacji na widoku. Wykonywałem to w następujący sposób:

Jeśli powyższy kod nie jest dla Ciebie jasny, zalecam zapoznanie się z I częścią artykułu o Reactive Forms, a najlepiej przeczytanie wszystkich części dotyczących Reactive Forms.

A teraz wyobraź sobie, że masz 10 inputów, w tym różne typy errorów (Required, minLength, maxLength, pattern etc). Zaczyna pachnieć spaghetti code? O tak…

Zdecydowanie będzie lepiej, jeśli nasze powyższe dwa elementy span z errorami, wyglądałyby następująco:

Żadnych dirty, logiki, tekstu, nazwy errora, wyłącznie referencja do obiektu = profit.

Pokażę, jak przygotować serwis oraz komponent, który zwróci nam odpowiedni typ błędu. Po co nam to?

  • wszystkie teksty errorów trzymamy w jednym obiekcie, w przypadku zmiany możemy za jednym ruchem zmienić teksty w całej aplikacji
  • czystsza templatka
  • szybsza walidacja formularzy, nie tracimy zbędnego czasu na rozpisywanie

Poniżej link do plunkera, który zawiera kod z dalszej części artykułu:

LIVE EXAMPLE

Powyższy live example, jest on kontynuacją poprzedniego plunkera dotyczącego custom validatorów. W tym artykule interesują nas wyłącznie pliki:

  • app/validation.service.ts
  • app/error-message.component.ts
  • app/error-message.component.html
  • app/model-driven-form.component.html

Czas do kodu!

Validation Serivce

Zaczniemy od przygotowania serwisu, który będzie zwracać nam odpowiedni error. Jest to klasa z jedną metodą statyczną, która przyjmuje dwa argumenty – klucz w obiekcie, który zwraca walidator, oraz opcjonalnie wartość walidatora.

(app/validation.service.ts)

Istotne, aby nasze klucze w obiekcie messages, nazywały się dokładnie tak jak klucze w obiekcie zwracanym przez walidator. Do obiektu messages dodajemy wszystkie możliwe walidacje, których używamy. Walidatory digits, oneRequired, startsWith stworzyłem w poprzednim artykule.

Serwis gotowy. Czas na komponent, wyświetlający odpowiedni error na widoku.

Error Message Component

Nasz komponent jest mały i prosty. Składa się wyłącznie z inputa i jednego gettera. Input() będzie odbierał referencję do obiektu, który reprezentuje kontrolkę lub grupę w formularzu (FormControl lub FormGroup).

Natomiast getter zwróci nam odpowiedni error z pomocą serwisu.

(app/error-message.component.ts)

Jeszcze prosta templatka errora, którą oczywiście możesz ostylować wedle upodobań.

(app/error-message.component.html)

Oraz użycie na widoku:

(app/model-driven-form.component.html)

Jak widzimy, w data-bound [control], przekazujemy wyłącznie referencję do danej kontrolki / grupy. Możesz również sparametryzować error-message komponent i np decydować czy dirty / touched / pristine występuje w danej walidacji.

Wyświetlanie errorów nigdy nie było przyjemniejsze!:-) Link do plunkera:

LIVE EXAMPLE

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *