Angular2 – Reactive Forms – tworzenie formularza reaktywnego

Angular2

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

Angular2 – Reactive Forms – wprowadzenie do formularzy

Angular2

Angular2 pozwala nam na stworzenie dwóch rodzajów formularzy: reactive forms (zwane też model-driven forms) i template-driven forms. Oba rodzaje znajdują się w bibliotece @angular/form. W tym wpisie przyjrzymy się pierwszej z technik tworzenia formularzy, czyli reactive forms.

Reactive forms

Reactive forms, jak sama nazwa wskazuje wspomagają reaktywny styl budowania aplikacji. Formularze tworzy się w wygodny i szybki sposób. Łatwo też możemy nimi zarządzać, bezpośrednio w klasie komponentu.

reactive forms

Poprzez formularze reaktywne stworzone zostaje swoiste drzewo. Dzięki temu zarządzanie, nawet najbardziej skomplikowanymi formularzami, staje się dużo prostsze.

With reactive forms, you create a tree of Angular form control objects in the component class and bind them to native form control elements in the component template, using techniques described in this guide.

Klasy

W formularzach w Angular2 możemy wyodrębnić podstawowe klasy: FormControl i FormGroup.

FormControl

FormControl jest bodstawowym bytem formularza. Pozwala na śledzenie zmian oraz na walidację pojedynczego pola formularza.

Przykład:

FormGroup

FormGroup to grupa instancji FormControl. Również pozwala na śledzenie zmian oraz walidację w ramach grupy.

Przykład:

Dodatkowe

Ponadto, w Angular2 przygotowano klasę FormArray. Umożliwia operowanie na indeksach tablicowych przy tworzeniu formularza. Specyfikacja wyróżnia jeszcze abstrakcyjną klasę AbstractControl.

Form Builder

Do przyspieszenia pracy znakomicie nadaje się FormBuilder. Klasa ta pozwala ograniczyć powtórzenia kodu oraz poprawić jego czytelność.

Co dalej

W kolejnym wpisie wprowadzimy teorię w ruch i zbudujemy reaktywny formularz w aplikacji Shopping Manager. Do zbudowania wykorzystamy komponenty wspomniane w dzisiejszym wpisie