Angular: Walidacja i komunikaty błędów

Angular 6, 7, 8+

0:01Witaj w kolejnej lekcji dotyczących formularzy w angular material jak

0:06pamiętasz z poprzednich lekcji do każdego pola mogliśmy dodać sobie taki element jak

0:10mat hint czyli taką podpowiedź informację dodatkową do danego

0:14pola jeśli jest to opis naszego tutaj zadania które dodajemy w formularzu to

0:19podam taką pomocniczą informacje keep it short

0:24i oczywiście ta informacja nam się wyświetli tutaj bezpośrednio pod polem ona

0:29jest cały czas widoczna nieważne czy pisze cały czas ją tutaj widać można ją umieścić

0:33po lewej stronie możemy ją umieścić po prawej stronie jest tu

0:37informacja jest wskazówką jeśli jednak coś pójdzie nie tak wpiszemy nieprawidłową

0:41wartość zapomnimy wpisać wartość no to powinniśmy wyświetlić tutaj nie informację

0:46tylko komunikat błędu do tego mamy też specjalny element nazywa się to

0:50mat error i na przykład jeśli ktoś wpisze tutaj no

0:54właśnie nie wpisze powiedzmy required albo

1:00jeśli wpiszę na przykład zbyt krótką not to short

1:06to ten komunikat nam

1:10się tu nie pojawi bo powien się pojawić pod tą treścią po pierwsze

1:15nic się nie dzieje a po drugie to miejsce jest zajęte co z tym robić pierwsza

1:20rzecz żeby ten mat error wykrył komunikat błędu to faktycznie

1:24musi być tutaj przypięty jakiś na przykład obsługę formularza teraz mamy

1:28dwie możliwości możemy użyć modułu angular fonts

1:33module lub reactive forms module i ja teraz zacznę od

1:37opcji prostszej czyli ng model ng model oczywiście

1:41tutaj nie zadziała bo nie mamy dodanego modułu czyli

1:47ten ng moduł tutaj niczego nie zmienił spróbuję więc tu do naszych app module

1:52dodać odpowiedni module będzie to forms module

1:57zaimportowany z angular forms tym razem czyli jest to wbudowany model

2:01ng model wbudowany w angulara i

2:05teraz ng model powinien dodać tu walidację jakie

2:10żadne bo nie skonfigurowaliśmy więc dodamy sobie jeszcze tutaj powiedzmy

2:14required i powiedzmy że min length

2:20trzy znaki muszą być mininum i

2:24w tej sytuacji tutaj wygląda to że nic się nie zmieniło ale pierwsza rzecz

2:28jeżeli dodaje tutaj atrybut required material zwróć uwagę automatycznie dodaję nam tutaj gwiazdkę

2:33informacje tutaj wypełnij to pole czy jest to informacja

2:37że pole jest wymagane i

2:41teraz błędu nie widać dopiero jak zacznę pisać lub

2:48opuszczę pole to mamy tu informacje short

2:52description not too short i zwróć uwagę że ten komunikat

2:57błędu zastąpił nam informację która tu była cały czas przy tym hint mamy

3:01tylko jedno miejsce więc automatycznie jeśli jest kontrolka w

3:06stanie błędnym no to te błędy które tu wyświetlamy zastępują ten

3:10komunikat te komunikaty które tutaj by się znajdowały jeśli zrobię align end

3:18hint jest po tej stronie jeśli jest błąd jak

3:23widzisz nawet po prawej stronie i może by się zmieścił tutaj żeby nie

3:27ryzykować że tekst jeden i drugi się jakoś skolidują ze sobą po prostu

3:31te informacje ukrywamy komunikat błędu jest ważniejszy tak

3:36ma priorytet nad wszelkimi tutaj dodatkowymi informacjami okej

3:40w takim razie co się stanie kiedy będzie tutaj kilka

3:44komunikatów błędów to za chwilkę co jeśli mamy tutaj kilka walidacji

3:49skąd wiemy która dotyczy no tutaj musielibyśmy faktycznie zastosować standardową

3:53walidacji angularową czyli w przypadku ng jest to trochę

3:57zawiła sprawa musiałbym się dostać do tego ng modelu nazwę to sobie

4:01powiedzmy description albo title

4:05nazwa jest tu dowolna i do tego przepisze ng

4:09model i teraz mogę dostać do ng

4:14model i pobrać sobie informacje o błędach czyli powiedzmy chcę wyświetlić

4:18no tu short kiedy jeśli w modelu

4:29mamy błąd i podaje tutaj nazwę błędu którego to dotyczy

4:33czyli tu short dotyczy min length requeired

4:39tu będzie required

4:49tutaj jeszcze zmienę na start żeby się to tym samym miejscu

4:53pojawiało okej keep it short komunikaty się nie wyświetlają dopóki

4:57nie wejdę w interakcje z polem mamy gwiazdkę mamy tutaj komunikat

5:01keep it short jeśli tutaj kliknij nic się nie dzieje mogę pisać jeśli

5:06pominę to pole zapomnę go wypełnić przejdę do type to jak

5:10tylko kliknę kolejny element tutaj pojawił nam się field jest required zniknęła

5:15informacja jest to pierwszy komunikat błędu i zacznę pisać automatycznie

5:20tutaj zmienia nam się walidacja pojawia nam się tutaj

5:24inny komunikat i jeśli ten ta gwiazdka nam

5:29się nie podoba nie chcemy gwiazdki to możemy tutaj na

5:33mat form field dodać taką opcję jak hide hide

5:40required marker i tu powinno nam tak

5:44nie wyświetlać tej gwiazdki jest jednak fajna rzecz bo to nam pokazuje które pola

5:48są wymagane praktycznie automatycznie w gratisie tutaj jest jeszcze

5:52jedna kwestia co jeśli jednocześnie dwie walidacje

5:56nam są aktywne czyli mamy dwa błędy popełnione jednocześnie jakby

6:00to zrobić mamy required i length zwróćmy uwagę że pole może być wymagane

6:06i mieć minimalna długość i jeśli ja mam nie wpisane

6:10nic mam tylko jeden komunikat błędu ale to nie dlatego że

6:14on wyświetla jednocześnie jeden on tutaj wyświetla wszystkie które może tak

6:18się składa że pole mogłobyć wymagane albo powiedzmy pole ma wymaganą

6:22długość ale nie jest wymagane czyli mogę zrobić w ten sposób i

6:26w ten sposób jeśli nic nie wpisze jest to poprawne dopiero jeśli mamy requeired i min length to

6:30jest niepoprawne i teraz powiedzmy że dodam tu jeszcze jedną walidację pattern

6:35wzorzec i

6:39powiedzmy że pole musi mieć musi

6:43zaczynać się od litery nie wiem

6:48może od znaku zaczynać powiedzmy od a z spróbujmy

6:53coś takiego i dodam tutaj jeszcze jedną walidację nazywę ją pattern i

6:58powiem że musi zaczynać się od litery

7:07okej i teraz tak jeśli wpiszę jedynkę zwróć uwagę

7:12tu mamy dwa błędy jeśli są dwa błędy jeszcze nie ma tragedii ale

7:16zobacz one tu zaczynają nachodzić na kolejny element tu za bardzo jest to bardzo blisko gdyby

7:21miał trzy cztery więcej błędów to pojawi się taki problem że te błędy

7:25zaczną tutaj nachodzić na kolejne pole i teraz co możemy z tym zrobić

7:29moglibyśmy tutaj dodatkowo jeszcze warunki sprawdzać czyli powiedzmy jeśli

7:34min length tak ale

7:39nie na przykład pattern lub odwrotnie tutaj jeśli

7:44pattern ale nie min length tylko te if'y będą się bardzo skomplikowane stały alternatywą jest

7:49po prostu ukryć css'em elementy których nie potrzebujemy tutaj

7:55mat error element ja sobie go zbadam jest

7:59to mat error jeśli chcemy tylko jeden z nich tu się kilka wyświetli

8:03bardzo prosta sprawa poszukam sobie mat error okej

8:09i jeśli jest ich kilka to mogę mieć na przykład

8:14last child albo first child i

8:19mógłbym ukryć ostatni element nawet jak będzie ich więcej 3 4 5 no

8:23to mogę powiedzmy wszystkie które nie są

8:27ostatnim elementem ukryć

8:32spróbujmy display

8:38none i teraz jeśli pojawi się ich kilka on ukryje wszystkie

8:42poza ostatnim czyli

8:47spróbuję jeszcze raz nie ma błędu napiszę jedynkę kliknę obok

8:53musi zaczynać się literą wcisnę a

8:58nie za krótki czyli widzisz w ten sposób można tutaj

9:02zamiast pisać logikę jakąś skomplikowaną w angularze w htmlu możemy

9:06po prostu ukryć css'em nadmiar błędów tak by wyświetlić pierwszy lub ostatni

9:10mógłbym zmienić także na first child jeśli chciałbym jeśli chciałbym żeby zawsze

9:14pierwszy z listy naszej się wyświetlał oczywiście kolejność zależy tutaj od tego w

9:19jakiej kolejności umieścicie umieścisz te elementy tutaj w htmlu

9:26i jak pewnie zwróciłeś uwagę tutaj w tym naszym formularzu

9:30te błędy nie pojawiają się od razu jeśli ja umieszczę kursor błędów

9:34nie widać jeśli zaczniemy pisać to już błędów nie

9:38widać dopiero jak opuszczę to pole lub spróbuję wysłać formularz

9:43dopiero wtedy pojawia mi się komunikat błędu jest to bardzo praktyczne

9:47zachowanie bardzo dobry sposób działania formularza bo nie przeszkadza

9:51nam w trakcie pisania dopiero jak opuszczę przejdę do kolejnego to mówi cofnij

9:55się tam jest błąd popełniłeś błąd cofnie się jednak tutaj zależnie od

9:59projektu zależnie od sytuacji możemy potrzebować troszkę innego zachowania gdybym

10:03na przykład chciał taką sytuację że na początku nie ma błędu ale

10:08dopiero jak już zacznę pisać powiedzmy wpiszę

10:12tu jakąś długą nazwę zaczyna od nad przykład

10:17od 1 2 3 to no fajnie

10:21by już wiedział że to jest to błąd a nie dopiero jak skończę pisać no to dopiero

10:25wtedy co można z tym zrobić możemy definiować w inny sposób pokazywania

10:30i chowania tych błędów i tego nie będziemy robić tutaj w htmlu tylko zrobimy

10:34to po stronie javascriptu ja stworzę specjalną klasę to

10:39sobie usunę i będzie to mój własny

10:44nazwę go custom error matcher

10:49error state matcher i będzie

10:53to klasa która będzie rozszerzała domyślny error state matcher właśnie

10:57implementowała i teraz

11:03tą klasę zaimportujemy sobie z angular-material powinno

11:09tak zadziałać i tutaj brakuje jakiejś metody tu mi podświetla błąd tutaj w edytorze

11:14jeśli masz taką funkcję powinna być taka funkcja jak automatycznie zaimplementuj

11:19interfejs i ono mi w taki dziwny sposób

11:23to robi bo robi to inline'owo ale nie szkodzi pousuwam to

11:27i te importy teraz każe mu zaimportować może jeszcze raz czyli

11:32także żarówka dodaj brakujące importy okej

11:37czyli jak widzisz custom error state matcher czy w ogóle

11:41error state matcher jest to funkcja która zmieni zachowanie pod wyświetlanie błędów pokazywania

11:45błędów i to jest klasa która musi implementować funkcje is error czyli czy

11:49mamy błąd dostajemy tutaj kontrolkę aktualną ogniu której to przetniemy także

11:54cały formularz i musimy zwrócić prawda lub fałsz i

11:58teraz tak jeśli powiedzmy return albo

12:03może w ten sposób napiszemy jeśli mam kontrolkę okej

12:07i jeśli ta kontrolka no

12:12właśnie invalid jeśli ma jakiś błąd niekoniecznie nie mówi jaki błąd nie chce sprawdzać

12:16jaki to jakikolwiek błąd się pojawił no

12:20właśnie ale czy to wszystko może napisze to w jednym if'ie żeby było szybciej żeby tych

12:26if'ów nie zagnieżdżać czyli jeśli istnieje kontrolka jeśli jest w niej błąd

12:30i właściwie moglibyśmy już to od razu zrobić tylko to w ten sposób

12:34od razu cały czas będzie nam się świeciło na czerwono to może zróbmy tak

12:38że jeśli jest kontrolka jeśli jest niepoprawna i

12:43jeśli ktoś zaczął pisać czyli

12:47zmienił stan na brudny ze stanu czystego lub

12:56ktoś

12:57opuścił to pole czyli dotknął i poszedł do kolejnego pola czyli

13:01tu mamy dwie sytuacje mogę to sobie w nawiasie także zapisać żeby było

13:05czytelniej czyli jeśli mamy kontrolkę jeśli jest błędna

13:09nie wyświetla im błędu dopiero jeśli ktoś zacznie edytować lub

13:14ktoś pominie w sensie wejdzie i wyjdzie zapomnie o tej kontrolce to żeby wrócił i

13:18jeszcze mamy zobacz dostęp do całego formularza więc możemy sprawdzić czy

13:22ktoś w ogóle nie pominą tej kontrolki i nie poszedł od razu do formularza

13:26i go nie próbował wysłać w każdej z tych sytuacji zwracam

13:35tak czyli wyświetl błąd mógłbym

13:39właściwie od razu zamiast if'a zwrócić to

13:43wszystko bo całe to wyrażenie będzie też albo prawdą albo fałszem też

13:48jest to poprawne więc zobaczmy tutaj możemy podjąć decyzję kiedy

13:52który stan formularza i kontrolki oznacza że wyświetlamy

13:56błąd teraz ten custom error state matcher to

14:01jest klasa ja muszę utworzyć konkretny obiekt więc tutaj dodam

14:05sobie error matcher i

14:09utworzy sobie nową taką klasę mógłbym poprzez dependency

14:13injection wstrzykiwać do konstruktora ale tutaj dla uproszczenia po prostu

14:17utworzę sobie bezpośrednio w tym miejscu i teraz tak przechodząc do formularza

14:25error matcher

14:26to się równa error matcher i to jest nie tutaj tylko na

14:31inpucie okej zobaczmy teraz coś

14:36tu jeszcze jest nie tak error state matcher oczywiście

14:42okej i teraz nim wyświetli tutaj błędy powinien

14:46się skonsultować z naszym obiektem error matcher i dopiero wtedy podjąć decyzję czy

14:51te wszystkie flagi te wszystkie statusy są prawdziwe dopiero wtedy wyświetlić błąd

14:56okej coś tu jeszcze jest nie tak submitted

15:01of null no tak nie mamy formularza zwróć uwagę że

15:05jeśli chcesz skorzystać z takiej walidacji mamy jeden input nie jest on częścią formularza

15:09żeby to zadziałało to musiałbym to wszystko objąć jeszcze w formularz

15:13dodam sobie tak formularz i muszę

15:22obtoczyć wszystkie kontrolki w formularz tak żeby

15:26ta kontrolka nasza input wiedziała z którym przyciskiem

15:31tutaj ma się skomunikować i nasz create task to będzie submit

15:36czyli żeby było wiadomo które kontrolki

15:41dotyczą którego pola i tutaj oczywiście będzie problem prawdopodobnie oczywiście że

15:45jeśli mamy kilka pól w formularzu to musimy je nazwać bo inaczej nie będzie wiadomo które pole jest które czyli

15:51jak mamy to pole z ng model to musiałbym jeszcze dodać tutaj jakiś name

15:55i to jest powiedzmy title

15:59tytuł naszego zgłoszenia tytuł naszego zadania okej

16:04tu coś się popsuło ze stylami z jakiegoś powodu prawdopodobnie

16:09chodzi o formularz tak jeśli chcemy żeby była flex box w kolumnie to formularz

16:13umieszczę na zewnątrz a div'y ze stylami umieszczę

16:18w środku teraz powinny się style zgadzać okej

16:22teraz mamy formularz dzięki temu że formularz obejmuje i input

16:26i button kliknięcie w button powiadomi że tutaj matcher o tym

16:30że ktoś próbował wysłać formularz czyli tak nic nie piszę nic się nie dzieje kliknę

16:35nic się nie dzieje ale zacznę pisać od razu tym razem widzę komunikat

16:39błędu tak nie muszę tak opuścić pola

16:43że nie muszę skończyć pisać tylko już w trakcie pisania druga

16:47opcja jeśli nie

16:52zacząłem pisać może w ogóle właśnie nie będę nawet dotykał formularza

16:56tylko od razu kliknę wyślij jak widzisz także kliknięcie w

17:00przycisk powiadamia formularz że został wysłany próba wysłania co

17:04z kolei powiadomiło nasz tutaj error matcher o tym że należy wszystkie

17:08błędy tutaj wyświetlić w tym formularzu czyli nie pozwalamy komuś wysłać nie

17:13uzupełnionego formularza i to tyle jeśli chodzi o tutaj walidacje

17:18z angular material jak widzisz jest to bardzo przyjemne bardzo wygodne jest też dużo

17:22możliwości konfiguracji jak pokazałam tutaj wersję z

17:26ng model i angular forms module

17:30ale tak samo tutaj zadziałałoby to z reactive

17:34forms module tych wszystkich po prostu tutaj elementów

17:38byśmy nie potrzebowali tylko moglibyśmy schować sobie to w javascripcie

17:43użyć form control group home control czyli standardowy formularz reaktywny

17:47w angularze tak że będzie to ładnie nam współgrało z angular material

17:52i z walidacją to tyle do zobaczenia

17:56w kolejnych lekcjach