Niestandardowa walidacja formularzy w Angularze

Dowiedzą się Państwo, jak implementować niestandardowe walidatory, aby zapewnić niezawodną walidację formularzy w aplikacjach Angular.

Czym jest niestandardowa walidacja?

Niestandardowe walidatory pozwalają definiować własną logikę walidacji wykraczającą poza wbudowane walidatory, takie jak required czy minlength.

Tworzenie niestandardowego walidatora

Niestandardowy walidator to prosta funkcja, która zwraca null dla poprawnej wartości lub obiekt dla wartości niepoprawnej:

function forbiddenNameValidator(control: AbstractControl): { [key: string]: any } | null {
  return control.value === 'admin' ? { 'forbiddenName': true } : null;
}

Stosowanie walidatora

Zastosuj niestandardowy walidator do kontrolki formularza:

this.myForm = new FormGroup({
  username: new FormControl('', [forbiddenNameValidator])
});

Wyświetlanie błędów walidacji

Warunkowo wyświetlaj komunikaty o błędach w szablonie na podstawie stanu walidacji:

<div *ngIf="myForm.get('username').hasError('forbiddenName')">
  Username 'admin' is not allowed.
</div>

Używanie dyrektyw walidatorów

Walidatory mogą być także używane bezpośrednio jako dyrektywy w formularzach sterowanych szablonem:

<input name="username" ngModel forbiddenName>

Walidatory asynchroniczne

Walidatory asynchroniczne umożliwiają przeprowadzanie walidacji obejmującej operacje asynchroniczne, takie jak sprawdzanie na serwerze:

username: new FormControl('', null, [asyncValidator])

Testowanie niestandardowych walidatorów

Zawsze testuj walidatory, aby upewnić się, że działają poprawnie w różnych scenariuszach i przypadkach brzegowych.

Podsumowanie

Poznali Państwo sposoby tworzenia i stosowania niestandardowych walidatorów w celu zapewnienia niezawodnej walidacji formularzy w Angularze. Doskonała praca!