Nowoczesny React: Zadanie: rozwiń fomularz

0:00Jako zadanie, którymi podsumujemy cały ten moduł.

0:03Chciałbym, żebyś dodał jedno dodatkowe pole do naszego formularza.

0:07Niech to będzie pole z adresem email.

0:09Wiem, że totalnie nie obsługujemy takiego pola.

0:12Możemy je sobie tutaj nawet nie wysyłać, pominąć value z ad person, ale z

0:18perspektywy naszej aplikacji chciałbym, żebyśmy walidowali jeszcze adres email.

0:22Adres email.

0:22To będzie takie dodatkowe pole, o które możemy tak naprawdę rozwinąć naszą

0:26aplikację kiedyś w przyszłości.

0:28Jeśli chcesz iść gdzieś dalej z tą aplikacją, być może adres mailowy przyda

0:32nam się do tego, żeby chociażby poinformować wszystkich jaka impreza ma

0:36miejsce, że będzie to właśnie takie coś a'la Secret Santa, poinformować wszystkie

0:41osoby plus dodatkowo poinformować ich w sekrecie kto komu kupuje prezent,

0:46no i chociażby jaki mamy budżet.

0:48Więc widzimy, że takie pole do dalszego rozwoju aplikacji by się nam przydało, A

0:52jest to dla nas po prostu pretekst do tego, żeby przećwiczyć formika.

0:56Więc tutaj zapauzuj teraz wideo i spróbuj dodać pole z adresem email oraz walidacją.

1:03Zobaczmy.

1:03Na początku nasz stan formularza będzie miał coś takiego jak email, czyli tutaj

1:08formik będzie obsługiwał jeszcze dodatkowo coś takiego jak email.

1:12Chcielibyśmy też to walidować.

1:14Tutaj możemy to sobie zrobić w dokumentacji.

1:18Zauważ, że jeżeli kliknę sobie tutaj w Docs, będę miał tutaj przykład

1:22nawet z adresem email.

1:24Możemy sobie to pożyczyć i tutaj if values email i chcielibyśmy to sobie walidować.

1:31Czyli mamy sprawdzenie czy w ogóle email jest.

1:35Później, jeżeli email jest, to chcielibyśmy sobie sprawdzić w jaki

1:39sposób, czyli tutaj required, w jaki sposób został on wpisany i zwalidować,

1:45czy wszystko jest poprawnie i później.

1:48Jeżeli nie, to invalid email address.

1:51I tutaj możemy sobie nazwać to pole Email is required.

1:56Okej, część walidacyjną mamy za sobą, ale jeszcze nie widzimy pola, w którym

2:01moglibyśmy ten adres email zapisać.

2:03Zobacz, że musimy przekopiować całego tego field, a tutaj tak będzie najkorzystniej.

2:08I podmienić tutaj te zapiski o email, czyli przede wszystkim name.

2:13To jest email.

2:14Zauważ, że type to też może być email.

2:17Możemy coś takiego wrzucić z HTML'a 5 i teraz dodatkowo email

2:23będziemy obsługiwać tutaj.

2:25I oczywiście tutaj Values Earth.

2:29Zobaczmy, czy jest wszystko poprawnie.

2:32Mamy tutaj. Email.

2:33Adres email.

2:34Address is required.

2:35Widzimy, że jeżeli wpiszemy poprawny adres email jest ok.

2:39I tutaj możemy jak gdyby zobaczyć cały formularz.

2:43Jeżeli go dodamy to wszystko jest w porządku i nie czyści nam się

2:47tylko jeszcze to pole z mailem.

2:49Zobaczmy sobie.

2:50Tutaj mamy reset form.

2:52Spróbujmy odświeżyć cały ten widok.

2:56Ok, teraz wszystko jest w porządku, więc wystarczyło tylko odświeżyć widok.

3:00Czyli pamiętaj o tym, że tutaj po zakończeniu zadania jeszcze odświeżamy

3:04sobie tą stronę po to, żeby sprawdzić czy wszystko działa nam poprawnie.

3:07Mamy tutaj personname i to jest nasze pierwsze pole, a drugie pole obsługuje

3:12właśnie adres mailowy, ale to jest czysta analogia.

3:15Czyli idziemy sobie analogicznie moglibyśmy sobie zrobić coś takiego.

3:19Zauważ, że jest tu dobre pole do tego, żebyśmy zrobili sobie

3:22jakiś odrębny komponent.

3:24Ten komponent obsługiwał by właśnie zarówno errory przekazywane przez props

3:28jak i tutaj onchange, blur i value.

3:31Tak żebyśmy sobie uprościli cały ten zapis.

3:33Czyli moglibyśmy sobie to enkapsulować w środku jakiegoś komponentu, który

3:38nazwalibyśmy po prostu formfields i w ten sposób budowali sobie dalej formularze.