Dynamiczna walidacja formularzy w Angular4

Bartosz Szewczyk

Dynamiczna walidacja formularzy w Angular4
Wrzesień 4, 2017 Katarzyna Sobczak

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
style alertów

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).

walidacja formularza - przykład

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

Podziel się

Autor: Bartosz Szewczyk

Bartosz Szewczyk

Bartosz Szewczyk

Zespół: Apps

Ostatnie artykuły autora

Rozliczanie przebiegów aut w przedsiębiorstwie w 5 minut

Rozliczanie przebiegów aut w przedsiębiorstwie w 5 minut

Bartosz Szewczyk przedstawia rozwiązanie, które pomaga zarządzać w samochodami w przedsiębiorstwie, zapewniając komfort i szybkość pracy użytkowników.

Synchronizator poczty z Exchange do SharePoint

Synchronizator poczty z Exchange do SharePoint

W artykule przedstawiono rozwiązanie pozwalające na synchronizację wiadomości w czasie rzeczywistym z Exchange do SharePoint w celu dostarczenia użytkownikowi dodatkowych, niedostępnych w programie Outlook możliwości pracy nad załącznikami oraz przyspieszenie dostępu do danych.

Routing w Angular

Routing w Angular

Routing umożliwia nawigowanie między komponentami w aplikacji bez jej przeładowywania. W artykule przestawiam, jak we frameworku Angular4 zaimplementować przykładowy routing.

Skontaktuj się z Bartoszem

 

Administratorem danych gromadzonych z wykorzystaniem formularza jest A.P.N. Promise S.A. Podane przez Ciebie dane będą przetwarzane w zakresie niezbędnym do podjęcia kontaktu lub realizacji określonego żądania zgodnie z art. 6 ust. 1 lit. b RODO przez okres niezbędny dla realizacji Twojego zgłoszenia. Wszelkie informacje w zakresie przetwarzania podanych przez Ciebie w formularzu danych oraz posiadanych uprawnieniach znajdziesz w Polityce prywatności. Kliknij i dowiedz się więcej jeżeli informacje podane powyżej nie są dostatecznie jasne!