Angular2 – Reactive Forms – tworzenie formularza reaktywnego

W poprzednim wpisie dowiedzieliśmy się czym są reaktywne formularze. Czas na wprowadzenie teorii w życie. W tym krótkim wpisie dowiemy się, że tworzenie formularza reaktywnego nie jest tak skomplikowane, jak nam się wydaje.

Przygotowanie

Na początku przygotujmy sobie miejsce, gdzie stworzymy nasz formularz. Do przygotowania struktury użyjemy komendy Angular CLI:

ng g c product/product-form.

W katalogu product, został stworzony nowy katalog product-form. W środku powinny się znaleźć 4 pliki, z czego w tym wpisie interesować nas będą tylko dwa: product-form.component.ts oraz product-form.component.html.

Nasz plik z komponentem powinien wyglądać mniej więcej tak:

Pozostało jeszcze dodać nasz nowy komponent do routingu i możemy zaczynać zabawę.

Tworzenie formularza reaktywnego

FormBuilder i FormGroup

Na samym początku zaimportujemy dwie klasy: FormBuilder i FormGroup. Obie znajdują się w paczce @angular/forms.

Możemy teraz stworzyć publiczną zmienną product, która będzie typu FormGroup:

public product: FormGroup;

Informujemy kontroler, że chcemy użyć FormBuildera do budowania formularza i możemy przystąpić do implementacji.

W metodzie ngOnInit, za pomocą FormBuildera, tworzymy nową instancję FormGroup.

Widok

W widoku naszego komponentu musimy teraz odwzorować formularz za pomocą HTMLa.

FormGroup

Na początku tworzymy formularz:

Informujemy widok, że interesuje nas FormGroup o nazwie product. Wysłanie formularza odbędzie się za pomocą metody ngSubmit, w której przekazujemy nasz product. Dodatkowo dodajemy pole novalidate, ponieważ walidacją zajmie się reaktywny formularz.

FormControl

Interesujące nas pola formularza, deklarujemy, tak jak w zwykłym formularzu:

Ważne jest tutaj przypisanie formControlName, które będzie odpowiadać zadeklarowanemu po stronie kontrolera.

OnSubmit

Na koniec tworzymy przycisk:

Ważne, żeby przypisać mu typ submit. Dodatkowo, możemy go zablokować, gdy formularz nie przejdzie walidacji.

Wynik naszej pracy możemy zwieńczyć dodając metodę onSubmit, w której zrobimy logi naszej pracy.

Walidacja

Walidacja takich formularzy, to sama przyjemność. Na początku musimy zaimportować klasę do walidacji: Validators z paczki @angular/forms.

Następnie do FormControl dodajemy tablicę opcjonalnych parametrów. Ja zdecydowałem się sprawdzić, czy pole name ma przynajmniej trzy znaki oraz poinformować formularz, że jest ono wymagane:

[Validators.required, Validators.minLength(3)]

Efekt pracy:

tworzenie formularza reaktywnego

tworzenie formularza reaktywnego

Zmianę możemy zaobserwować na przycisku Stwórz. Jeżeli pole name nie jest poprawne, jest on nieaktywny.

Podsumowanie

Jeżeli walidacja przebiegła pomyślnie, przycisk zrobi się aktywny i będziemy mogli użyć metody onSubmit(). Naszym oczom ukażą się dwa console.logi, w których pierwszy to wartości w formularzu, a drugi to informacja, iż formularz jest poprawny.

tworzenie formularza reaktywnego - wynik

 

Dawid Ryłko

Lubię dobre filmy, gry oraz kawę. W pracy front-end, po godzinach wszystko inne.

 
Współpraca:
Polski Front-End