Komunikacja z użytkownikiem jest jedną z podstawowych i ważniejszych funkcjonalności praktycznie każdej aplikacji. Toteż nie zdziwi fakt, że kontrolki oraz formularze mają tutaj decydujące znaczenie. Oto bowiem kontrolki umożliwiają użytkownikowi sterowanie ustawieniami aplikacji, wprowadzaniem do nich danych a i w efekcie końcowym przetwarzanie tych danych przez aplikację, przesyłanie czy też pobieranie i wyświetlanie do edycji. Tak więc na tej stronie postaram się przybliżyć nieco sposób obsługi komunikacji z użytkownikiem zarówno za pomocą pojedynczych kontrolek jak i całej serii zgrupowanej w formularzu. Omówię tutaj też sposób walidacji takich kontrolek.
Metod obsługi kontrolek jest w Angular-ze jest kilka. Na tej stronie omówię te związane z użyciem dyrektywy ngModel, która to w łatwy sposób umożliwia bindowanie zmiennych z kontrolkami.
Użytkownik - pierwszy kontakt czyli pojedyncze kontrolki z dyrektywą ngModel
Jeżeli w danym widoku potrzebujesz utworzyć jedną lub dwie kontrolki, a nawet i całą ich serię, która to będzie sterowała zachowaniem twojego widoku, wtedy to dyrektywa ngModel zdaje się być najwygodniejszą w użyciu. Oto bowiem wystarczy utworzyć sobie kontrolkę i zbindować ją w jakże przebiegły sposób:
<select [(ngModel)]="country" (selectionChanged)="countryChanged()">
<option *ngFor="let countryOption of countries" [value]="countryOption">countryOption<option>
</select>
oraz w kodzie komponentu napisać:
country: string = 'Polska';
countries: string[] = ['Polska', 'Francja', 'Włochy', 'Wielka Brytania', 'USA - the greatest country on the world'];
countryChanged() {
console.log('SELECTION CHANGED', this.country);
}
aby po chwili, lub co najwyżej dwóch móc cieszyć się z dwukierunkowego bindowania danych oraz pozyskiwania informacji o ich zmianie za pomocą metody podpiętej pod zdarzenie selectionChanged.
Nieco trudniej jest z tworzeniem własnych walidatorów, albowiem aby utworzyć swój własny upragniony walidator konieczne jest stworzenie własnej dyrektywy. Standardowe HTML-owe walidatory w dużej części przypadków sprawdzają się wyśmienicie. Oto przykład użycia takich właśnie walidatorów:
<input #country="ngModel" [(ngModel)]="countrySel" minlength="5" maxlength="20" required>
<div>
<span *ngIf="selCountrys.hasError('minlength')">Wprowadzony ciąg znaków nie może być krótszy od 5</span>
<span *ngIf="selCountrys.hasError('maxlength')">Wprowadzony ciąg znaków nie może być dłuższy od 20</span>
<span *ngIf="selCountrys.hasError('required')">To pole jest wymagane</span>
</div>
Z powyższych walidatorów maxlength nie spowoduje wyświetlenia komunikatu błędu, albowiem ten walidator po prostu blokuje możliwość wpisywania tekstu dłuższego niż upragnione 20 znaków.
Wszystko fajnie, wszystko pięknie. Tylko jak zrobić ten swój własny upragniony walidator? Odpowiedź jest prosta: w przypadku dyrektywy ngModel koniecznej jest stworzenie własnej dyrektywy implementującej interfejs Validator:
Dyrektywa powinna być dodana do deklaracji w app.module.ts w przeciwnym przypadku nie będzie działała poprawnie. Użycie tego walidatora będzie wyglądało tak:
<input #country="ngModel" [(ngModel)]="countrySel" minlength="5" maxlength="20" appForbiddenCountry="Rosja" required>
<div>
<span *ngIf="selCountrys.hasError('minlength')">Wprowadzony ciąg znaków nie może być krótszy od 5</span>
<span *ngIf="selCountrys.hasError('maxlength')">Wprowadzony ciąg znaków nie może być dłuższy od 20</span>
<span *ngIf="selCountrys.hasError('appForbiddenCountry')">Co Rosja! Rosja nigdy, Rosja nigdy!</span>
<span *ngIf="selCountrys.hasError('required')">To pole jest wymagane</span>
</div>
Po wpisaniu frazy, która będzie zawierała w swoim wnętrzu słowo Rosja (nawet pisane małą literą) zwrócony zostanie błąd 'appForbiddenCountry'. Dlaczegóż się uwziąłem na Rosję? Nie uwziąłem się, po prostu większość ludzi w Polsce ma alergię na ten kraj.
Walidacja formularzy
Jeżeli przyszło ci do głowy na myśl, że fajnie by było uzyskać ogólny kod błędu czy walidacji twojego cudownego formularza to z pewnością oczy swe skierujesz ku rozwiązaniu związanym z użyciem znacznika form. Albowiem za prawdę powiadam wam, dzięki zgrupowaniu kontrolek wewnątrz formularza można łatwo sprawdzić, czy cały formularz jest poprawnie wypełniony i umożliwić zablokowanie źle wypełnionego formularza. Niestety aby dyrektywa ngModel działała poprawnie konieczne jest w takim przypadku przypisanie każdej kontrolce atrybutu nazwy name albowiem jeśli tego nie zrobisz to nie będzie działało poprawnie bindowanie.
Oto przykład takiego formularza:
<form #myForm="ngForm">
<mat-form-field appearance="outline">
<mat-label>Kraj</mat-label>
<input matInput name="country" #country="ngModel" [(ngModel)]="countrySel" appForbiddenName="Rosja"
minlength="5" maxlength="20" required touched="true">
<mat-error>
<span *ngIf="country.hasError('forbiddenName')">zabroniony kraj!</span>
<span *ngIf="country.hasError('minlength')">Wprowadzony ciąg znaków nie może być krótszy od 5</span>
<span *ngIf="country.hasError('maxlength')">Wprowadzony ciąg znaków nie może być dłuższy od 20</span>
<span *ngIf="country.hasError('required')">To pole jest wymagane</span>
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Imię</mat-label>
<input matInput name="firstName" #firstname="ngModel" [(ngModel)]="firstName" minlength="5" maxlength="20"
required>
<mat-error>
<span *ngIf="firstname.hasError('minlength')">Wprowadzony ciąg znaków nie może być krótszy od 5</span>
<span *ngIf="firstname.hasError('maxlength')">Wprowadzony ciąg znaków nie może być dłuższy od 20</span>
<span *ngIf="firstname.hasError('required')">To pole jest wymagane</span>
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Nazwisko</mat-label>
<input matInput name="lastName" #lastname="ngModel" [(ngModel)]="lastName" minlength="5" maxlength="20"
required>
<mat-error>
<span *ngIf="lastname.hasError('minlength')">Wprowadzony ciąg znaków nie może być krótszy od 5</span>
<span *ngIf="lastname.hasError('maxlength')">Wprowadzony ciąg znaków nie może być dłuższy od 20</span>
<span *ngIf="lastname.hasError('required')">To pole jest wymagane</span>
</mat-error>
</mat-form-field>
<button mat-button type="submit" (click)="submit()" [disabled]="myForm.invalid">Wyślij</button>
</form>
Jak widać dzięki fragmentowi kodu:
#myForm="ngForm"
Uzyskuję dostęp do obiektu formularza, który to z kolei posiada właściwość invalid. Tę właściwość wykorzystałem w jakże przebiegły sposób do zablokowania przycisku Wyślij, gdy formularz nie jest poprawnie wypełniony. Użyłem tutaj również nieco ładniejszych Angular-owych kontrolek z modułu Material. Jeżeli chcesz skorzystać z tego modułu koniecznie musisz go najpierw zainstalować:
npm install @angular/material
a następnie dodać do projektu:
ng add @angular/material --save
Ostatnią rzeczą, jaką należy zrobić to zaimportować odpowiednie moduły w pliku app.module.ts:
