Пользовательская проверка форм в Angular

Узнайте, как реализовать пользовательские средства проверки для надёжной проверки форм в приложениях Angular.

Что такое пользовательская проверка

Пользовательские средства проверки позволяют определить собственную логику проверки, дополняющую встроенные средства, такие как required или minlength.

Создание пользовательского средства проверки

Пользовательское средство проверки — это простая функция, которая возвращает null при корректном значении или объект при ошибке:

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

Применение средства проверки

Примените пользовательское средство проверки к элементу управления формы:

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

Отображение ошибок проверки

Условно отображайте сообщения об ошибках в шаблоне в зависимости от состояния проверки:

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

Использование директив проверки

Средства проверки также можно использовать непосредственно в виде директив для форм на основе шаблонов:

<input name="username" ngModel forbiddenName>

Асинхронные средства проверки

Асинхронные средства проверки позволяют выполнять проверку с использованием асинхронных операций, например запросов к серверу:

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

Тестирование пользовательских средств проверки

Всегда тестируйте средства проверки, чтобы убедиться в их корректной работе в различных сценариях и пограничных случаях.

Итоги

Вы научились создавать и применять пользовательские средства проверки для надёжной проверки форм в Angular. Отличная работа!