ANGULAR 2 TEMPLATE DRIVEN FORMS

W Angularze 2, podejście do formularzy to istna rewolucja. Kiedy pierwszy raz zajrzałem do dokumentacji, chwyciłem się za głowę. Mieszanka 40-stu różnych nazw, w tym interfejsy, dyrektywy, klasy. Można się zgubić. Najbliższą serię 3-4 artykułów, poświęcę wbudowanemu modułowi FormsModule oraz ReactiveFormsModule.

Na wstępie wypada wiedzieć, że Angular proponuje nam dwa różne podejścia do budowania i obsługi formularzy:

  • template driven forms
  • model driven forms (znane także jako reactive forms).

W pierwszym artykule z serii skupię się na pierwszym wariancie.

TEMPLATE DRIVEN FORMS

Aby rozpocząć pracę z formularzami, musimy zacząć od zaimportowania modułu FormsModule do modułu, w którym chcemy go użyć.

W tym momencie uzyskujemy dostęp do API Forms w wybranym przez nas module. Zacznijmy od zbudowania najprostszego formularza z zastosowaniem Template Driven Forms:

Powyższy kod jest zapewne dla Ciebie zrozumiały, więc skupmy się na konkretach. W pierwszej linijce widzimy:

Można powiedzieć, że w tym momencie odpalamy Template Driven Forms. Stworzyliśmy template variable o nazwie tdForm, do której przypisaliśmy dyrektywę ngForm, którą udostępnia nam FormsModule. Zaglądając do dokumentacji ngForm, widzimy pole:

Exported As: ngForm

Właśnie dlatego do #tdForm przypisałem wartość „ngForm”, bo pod tą nazwą jest wyeksportowana. Dzięki przypisaniu dyrektywy do zmiennej #tdForm, stworzyłem nową instancję tej dyrektywy.

NGFORM.VALUE – obiekt reprezentujący wartość formularza

Dyrektywa ngForm daje nam dostęp do wartości pobranych z inputów:

Implementacja metody submit:

Value jest obiektem, reprezentującym wartości pobrane od użytkownika, jest to jedno z właściwości rozbudowanego obiektu ngForm, na który spojrzymy w całości w dalszej części artykułu. Pola obiektu value, powstają automatycznie na podstawie atrybutu „name” oraz dyrektywy ngModel, która nie potrzebuje mieć przypisanej wartości.

Zwrotka z konsoli po wypełnieniu danymi i kliknięciu buttona submit:

Bez żadnego kodu w komponencie, stworzyliśmy obiekt trzymający wartości pól formularza.

ONE-WAY ORAZ TWO-WAY-BINDING INPUTÓW

Jeśli chcemy nadać jakieś początkowe wartości do stanu formularza, możemy skorzystać z data-bound na dyrektywie ngModel:

I w kodzie komponentu:

Nie stoi również nic na przeszkodzie, abyśmy podłączyli two-way-binding do naszego formularza:

Plunker podsumowujący tą część artykułu:

LIVE EXAMPLE

W powyższym przykładzie, obiekt reprezentujący formularz był najprostszy z możliwych. Co jeśli chcemy mieć obiekt, który zawiera obiekty? Z pomocą przychodzi nam dyrektywa ngModelGroup.

NGMODELGROUP – tworzymy bardziej skomplikowany formularz

Szybko i prosto, możemy rozbudować nasz formularz dodając wyłącznie dykrektywę ngModelGroup, której przypiszemy nazwę grupy:

Jak teraz wygląda obiekt reprezentujący nasz formularz:

 

Dzięki użyciu dyrektywy ngModelGroup (wymaga dyrektywy ngForm) utworzyliśmy sub-grupy. Link do dema po zastosowaniu ngModelGroup:

LIVE EXAMPLE

Spójrzmy jeszcze, jak wygląda cała instancja dyrektywy ngForm w naszym komponencie:

 

Nasze ngModelGroup są trzymane w obiekcie „controls„. Natomiast cały obiekt z wartościami z formularza, jak już wiemy, pod polem value. Widzimy również wiele pól pomocnych do walidacji formularza, takie jak touched, dirty, valid etc. W osobnym artykule omówię, jak wykorzystać te pola do walidacji.

RESETUJEMY STAN FORMULARZA

Dyrektywa ngForm udostępnia nam również metodę do resetowania stanu całego formularza, lub danej podgrupy (zadeklarowanej poprzez ngModelGroup).

Dodajemy button reset i jako parametr przekazujemy zmienną reprezentującą formularz:

Kod metody reset():

Lub jeszcze krócej, w samej templatce:

Jeśli chcemy zresetować tylko pojedynczy ngModelGroup, przekazujemy nazwę groupy, która jest trzymana w controls:

Lub tworzymy template variable dla danego ngModelGroup:

I wołamy reset:

Live demo po dodaniu metod z resetami:

LIVE EXAMPLE

PODSUMOWANIE

Plusy:

  • możliwość obsługi formularza praktycznie bez pisania custom kodu
  • możemy dowolną ilość razy zagnieżdzać ngModelGroup w ngModelGroup
  • wystarczające narzędzie do obsługi dużych formularzy
  • przyjazna składnia z użyciem ngModel, zwłaszcza jeśli masz doświadczenie z budowaniem formularzy w Angular 1.x

Minusy:

  • brak możliwości napisania unit testów  (brak dostępu do DOM), musimy się zadowolić testami E2E
  • ngModelGroup jest obiektem, nie ma możliwości aby zmienić jego typ na tablicę

 

Dodaj komentarz

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