Dynamiczna walidacja formularzy w Angular4

W poniższym artykule przestawiam, jak w frameworku Angular4 zrobić formularze z dynamiczną walidacją.

Wymagania

Aplikacja będzie tworzona przy pomocy narzędzia Angular CLI – więcej informacji o niezbędnych narzędziach oraz opis sposobu ich używania znaleźć można w moim artykule pt. Budowanie aplikacji Angular4 przy pomocy Angular CLI.

Tworzenie projektu

Na samym początku trzeba utworzyć aplikację – w tym celu uruchamiamy wiersz poleceń i wpisujemy komendę:


ng new NAZWA_APLIKACJI

Po utworzeniu aplikacji trzeba ją uruchomić i sprawdzić, czy wszystkie niezbędne elementy zostały poprawnie utworzone. W tym celu wpisujemy komendę:


cd NAZWA_APLIKACJI
ng serve

Na konsoli powinniśmy otrzymać następujący wynik:

Po wejściu na adres http://localhost:4200/ powinniśmy zobaczyć napis: „app works!”.

Mamy już działającą aplikację angularową, możemy zatem przystąpić do tworzenia formularza.

Import Reactive Forms

Przed utworzeniem formularza musimy zaimportować do naszej aplikacji klasę ReactiveFormsModule, która będzie odpowiedzialna za dynamiczną walidację. W tym celu należy uruchomić plik app.module.ts, znajdujący się w katalogu: /src/app/

Następnie importujemy ReactiveFormsModule z @angular/forms i dodajemy do tablicy imports.

Budowanie widoku

Na początku musimy zbudować formularz, w którym użytkownik będzie mógł podać następujące dane:

Imię – wartość obowiązkowa
Nazwisko – wartość obowiązkowa, wartość musi być dłuższa niż 5 znaków
Godzinę – wartość obowiązkowa, musi być podana w poprawnym formacie (hh:mm)

Formularz musi mieć przycisk, którego kliknięcie spowoduje wysłanie danych na serwer pod warunkiem, że wszystkie pola zostały poprawnie wypełnione. Jeżeli któryś z inputów będzie miał niepoprawną wartość, aplikacja musi poinformować użytkownika o tym fakcie za pomocą stosownego komunikatu.

Input odpowiedzialny za pobranie zmiennej czasu mógłby być typu time, dzięki czemu mielibyśmy pewność, że wpisana wartość będzie poprawna. Użycie tego formatu jednakże groziłoby tym, że starsze przeglądarki, niekompatybilne z HTML5 nie renderowałyby go właściwie. Ponieważ nasza aplikacja musi działać na jak największej liczbie przeglądarek internetowych, również na tych starszych, nie możemy zastosować takiego rozwiązania. Najlepszym wyborem będzie użycie inputów typu text i ręczne oprogramowanie walidacji (aby dowiedzieć się więcej o typach inputów sugeruję zapoznać się z artykułem pt. HTML Input Types).

Kod HTML formularza wygląda następująco:

Mamy już formularz, który na razie nie ma oprogramowanej logiki. Po uruchomieniu projektu formularz wygląda następująco:

Budowanie logiki

Nasza logika będzie znajdować się w pliku app.component.ts, umieszczonym w katalogu: /src/app

Na samym początku musimy zaimportować funkcje niezbędne do obsługi logiki naszego formularza. W tym celu na początku pliku doklejamy linijkę:


import { FormBuilder, FormGroup, Validators } from ‘@angular/forms’;

W klasie AppComponent dodajemy property:


myForm: FormGroup;
post:any;

Tworzymy konstruktor:


constructor(private fb: FormBuilder) {
this.myForm = fb.group({
‘imie’ : [null, Validators.required],
‘nazwisko’ : [null, Validators.compose([Validators.required, Validators.minLength(5)])],
‘godzina’ : [null, Validators.compose([Validators.required, Validators.pattern("([0-1]{1}[0-9]{1}|20|21|22|23):[0-5]{1}[0-9]{1}")])]
});
}

W konstruktorze, przy pomocy FormBuildera tworzymy wariatory dla inputów:

Validators.required – musi zawierać dane, nie może to być pusty tekst
Validators.minLength(n) – minimalna długość znaku wynosi n
Validators.pattern(regex) – tekst musi spełniać wydarzenie regularne

Każdy walidator ma klucz, po którym będzie można go połączyć z inputem. Klucz musi być unikalny, nie może istnieć kilka pół o takim samym kluczu.
Następnie dodajemy metodę addPost, która będzie wyświetlała dane naszego formularza po kliknięciu przycisku Zastosuj.


addPost(post) {
alert("Post: "+post.imie + " " + post.nazwisko + " " + post.godzina)
}

W tej metodzie należy dodać kod, który spowoduje wysłanie zapytania na serwer. W tym tutorialu wystarczy, że wyświetlony zostanie alert prezentujący wpisane do formularza dane.

Po tych zmianach plik app.component.ts wygląda tak:

alert prezentujący wpisane do formularza dane

Podłączenie formularza do komponentu

W pliku app.component.html do znacznika form trzeba dopisać:


[formGroup]="myForm" (ngSubmit)="addPost(myForm.value)"

Dla formGroup wskazujemy myForm – properte FormGroup z pliku app.component.ts
Dla ngSubmit wskazujemy metodę addPost wraz z parametrem myForm.value, która ma się wykonać po wciśnięciu przycisku Zastosuj

Do każdego inputa trzeba dopisać kod:


formControlName="KLUCZ_Z_COMPONENTU"

Gdzie w miejscu KLUCZ_Z_COMPONENTU podajemy nazwę klucza odpowiedniego pola z konstruktora klasy AppComponent.W znaczniku przycisku trzeba dodać: [disabled]=”!myForm.valid”, dzięki temu przycisk zatwierdzający będzie wyłączony dopóki dane w formularzu nie będą poprawne.

wyłączenie przycisku zatwierdzającego gdy niepoprawne dane

Style i wyświetlanie komunikatów o błędach

Style odpowiedzialne za używany przez nas komponent znajdują się w pliku app.component.css, który umiejscowiony jest w katalogu /src/app

Musimy napisać dwie klasy css’owe:

in-valid – będzie tworzyć czerwoną ramkę dla inputa, w którym wpisano niepoprawną wartość
alert – czerwony tekst, który będzie wyświetlany obok inputa

W pliku app.component.html obok każdego inputa dopisujemy kod HTML:


<b class="alert" *ngIf="!myForm.controls[‘NAZWA_INPUTA’].valid && myForm.controls[NAZWA_INPUTA].touched"> TRESC_KOMUNIKATU </b>

Komunikat ten będzie korzystał z klasy alert i zostanie wyświetlony po pierwszym kliknięciu w input w sytuacji, gdy podane dane zostaną zweryfikowane jako niepoprawne (tj. nie będą spełniać warunków zaimplementowanych w pliku app.component.ts)

W inputach dopisujemy poniższy kod HTML:


[ngClass]="{‘in-valid’: !myForm.controls[NAZWA_INPUTA].valid && myForm.controls[‘imie’].touched}"

Jeżeli input nie będzie poprawnie zwalidowany, po kliknięciu Angular doda do inputa klasę in-valid, która sprawi, że input będzie miał czerwoną ramkę. Pozwoli to na pierwszy rzut oka zorientować się, że wystąpiły nieprawidłowości.

informacja o niepoprawnie wpisanych danych do formularza

Testy

Uruchomienie naszej aplikacji spowoduje wyświetlenie formularza. Jeżeli nie wpiszemy poprawnej wartości przed kliknięciem przycisku wysyłającego, input zostanie oznaczony na czerwono, a po prawej stronie wyświetli się komunikat informujący o tym, jaki błąd został wykryty. Jeżeli wszystkie dane nie będą spełniać wymagań, użytkownik nie będzie miał możliwości kliknięcia przycisku Zastosuj (będzie on nieaktywny).

Jeżeli wszystkie dane będą miały poprawny format, alerty i czerwone ramki znikną i będzie można kliknąć przycisk Zastosuj, co spowoduje wyświetlenie danych wpisanych do formularza.

potwierdzenie wysłania poprawnie wypełnionego formularza

Podsumowanie

Udało się stworzyć dynamicznie walidowany formularz przy pomocy Angular4.
W tym artykule nauczyliśmy się:

Importować moduł w Angularze
Tworzyć widoki
Tworzyć formularze z dynamiczą walidacją

Pełen kod aplikacji znajduje się w repozytorium GitHub: https://github.com/barid92/Angular-4-Reactive-Forms