Ten wpis będzie o tworzeniu formularzy, wykorzystując framework AngularJS. Prosta aplikacja, zbudowana na bazie dwóch komponentów posłuży nam do zademonstrowania, w jaki sposób powinniśmy tworzyć i walidować formularze, powszechnie wykorzystywane w tworzonych systemach webowych.
Część teoretyczna
Aplikacje internetowe wykorzystują formularze do wprowadzania danych, zatem są istotną częścią aplikacji. Walidacja wprowadzanych danych przez użytkowników powinna się odbywać zarówno po stronie klienta, jak również serwera. Aby ominięcie zabezpieczeń w aplikacji klienckiej nie spowodowało problemów po stronie serwera.
AngularJS umożliwia nam obsługę formularzy na podstawie HTMLowego znacznika <form>, a także dzięki dyrektywy Angularowej ngForm. Utworzona dyrektywa przez twórców frameworka, daje nam możliwość obsługi zagnieżdżonych formularzy. Zarówno wykorzystanie znacznika, jak i dyrektywy daje nam dostęp do obiektu powiązanego z danym formularzem. Obiekt ten przechowuje informacje wykorzystywane do walidacji. Abyśmy mogli korzystać z tego obiektu, należy do znacznika <form> lub <ng-form> dodać atrybut name.
Pola obiektu
$pristine – wartość typu boolean jeżeli formularz nie został zmieniony zwracana wartość true, po zmianie któregokolwiek pola wartość zostaje zmieniona na false.
$dirty – wartość typu boolean to odwrotność pola $pristine, zatem jeżeli pole nie zostało zmienione zwraca wartość false, po zmienie minimum jednego pola wartość zostaje zmieniona na true.
$valid – wartość typu boolean zwraca wartość true, jeżeli wszystkie pola formularza zostały poprawnie wypełnione, w przeciwnym wypadku zwracana wartość to false.
$invalid – wartość typu boolean zwraca odwrotność pola $valid.
$submitted – wartość typu boolean zwraca true, jeżeli użytkownik wysłał formularz, w przeciwnym wypadku wartość tego pola to false.
$error – wartość typu Object odwołuje się do pól, które nie przeszły poprawnie walidacji.
Pola tego obiektu dają nam możliwość zweryfikowania wprowadzonych danych przez użytkownika.
Przykładowa aplikacja
Na potrzeby tego wpisu przygotujemy aplikację, która będzie zbudowana z dwóch komponentów. Pierwszy z nich odpowiada za wprowadzanie danych, drugi zaś za wyświetlanie wcześniej wprowadzonych danych.
index.html
formRegister.html
registerProfil.html
Aplikacja składa się z 3 plików: index.html zawiera kod html strony głównej, a także obsługę AngularJS, formRegister.html którego zadaniem jest przechowywanie kodu html komponentu <form-register> odpowiedzialnego za wprowadzanie danych oraz registerProfil.html, który odpowiada za przechowywanie kodu html komponentu <register-profil>, którego zadaniem jest wyświetlanie wprowadzonych danych w formularzu przez użytkownika.
Omówienie index.html
Przejdźmy do omówienia tego co dzieje się w naszej aplikacji. Na początku tworzymy w pliku index.html moduł naszej Angularowej aplikacji. Następnym krokiem jest utworzenie kontrolera naszej aplikacji, którego zadaniem będzie przechowywanie danych i przekazywanie ich do utworzonych przez nas komponentów.
ctrl.register = {}; ctrl.register.formCheck = false;Kontroler ten zawiera obiekt register, do którego będą przekazywane dane z formularza, a także pole w tym obiekcie formCheck, wykorzystywane do sprawdzenia warunków wyświetlania utworzonych przez nas komponentów.
Kolejnym krokiem jest utworzenie komponentów. Pierwszym jaki tworzymy jest formRegister. O tworzeniu komponentów można przeczytać w jednym z wcześniejszych wpisów AngularJS – Component. dzięki templateUrl ustawiamy szablon html komponentu, bindings odpowiada za określenie przekazywanych danych, zaś ostatnie pole obiektu konfiguracyjnego przypisuje komponentowi kontroler, odpowiedzialny za wykonywanie operacji na danych.
ctrl.register.formCheck = true;W przypisanym kontrolerze mamy utworzoną funkcję submit(), odpowiedzialną za zmianę wartości pola formCheck obiektu register.
W podobny sposób tworzymy komponent wykorzystywany do wyświetlania wprowadzonych danych przez użytkownika. Określamy szablon html, a także przekazywane dane do komponentu.
Omówienie formRegister.html
Przejdźmy teraz do pliku formRegister.html, bo tu dzieje się najwięcej.
<form name="formReg">Do znacznika <form> dodajemy atrybut name, za pomocą którego będziemy mogli się odwoływać do obiektu opisanego powyżej.
Następnie mamy 4 kontrolki oraz przycisk odpowiedzialny za wysłanie danych.
<div> <label for="mail">Email address</label> <label ng-show="formReg.registerEmail.$touched && formReg.registerEmail.$invalid">Correct the e-mail address</label> <input type="email" id="mail" placeholder="Email" name="registerEmail" ng-model="$ctrl.register.email" required> </div>Zacznijmy omawianie pierwszego elementu formularza od końca, czyli od znacznika <input>. Mamy określony atrybut type, który jest odpowiedzialny za sprawdzanie czy podany ciąg znaków jest adresem email. Przypisanie klasy css dzięki atrybutu class. Kolejne atrybuty to: id oraz placeholder. Atrybut name w danym polu wykorzystywane jest do walidacji tego pola. ng-model odpowiada za wiązanie dwukierunkowe danych.
Po określeniu inputu możemy przystąpić do wyświetlania komunikatu o błędzie. Do tego wykorzystywany jest znacznik <label> z klasą error. Najważniejsza tutaj jest dyrektywa ng-show, która to określa warunek, kiedy ma zostać wyświetlony komunikat. Pojawia się jeżeli pole zostało naciśnięte, ale w tej chwili jest już opuszczone i pole nie jest poprawnie wypełnione.
Jak możemy zauważyć, mamy tutaj zaprezentowany schemat odwoływania się do pól sprawdzających pole formularza. Schemat ten wygląda następująco:
nazwa_formularza._nazwa_pola.$pole_obiektuW podobny sposób zrealizowane są kolejne pola formularza. Kolejną walidację mamy przy przycisku. Sprawdzamy tam, czy formularz został wypełniony prawidłowo, jeżeli tak umożliwiamy wysłanie go na serwer.
<button type="submit" ng-click="$ctrl.submit()" ng-disabled="formReg.$invalid || $ctrl.register.passwd !== $ctrl.register.rpasswd">Register</button>Odpowiada za to dyrektywa ng-disabled, która ma możliwość łączenia warunków jedynie dzięki spójnika lub ||. Sprawdzamy tutaj czy wszystkie pola zostały wypełnione, a także czy hasło oraz powtórzone hasło są różne. jeżeli któryś z warunków jest spełniony, blokowana jest możliwość przesłania formularza.
Szablon dla komponentu registerProfil to proste wyświetlanie danych przekazanych jako atrybut komponentu.
Efekt działania aplikacji
Podsumowanie
Stworzona przez nas aplikacja prezentuje sposób tworzenia i sprawdzania poprawności wprowadzonych danych przez użytkownika przy pomocy AngularJS. Jak widzimy, walidacja formularzy z wykorzystaniem frameworka jest bardzo prosta i przejrzysta. To kolejny krok postawiony w nauce tej biblioteki. W kolejnych wpisach zajmiemy się dalszymi elementami wykorzystywanymi podczas pisania aplikacji.
