В Angular есть два типа форм:
— Шаблонные формы
— Реактивные формы
Если вы новичок в формах, разберитесь с этим здесь. В этом сообщении блога мы узнаем, как создавать собственные валидаторы для Angular Reactive Forms.
Итак, для начала я предполагаю, что вы уже создали проект, используя ng new. Теперь предположим, что мы создали реактивную форму с помощью FormGroup.
Прикрепим его к шаблону компонента с помощью привязки свойств следующим образом.
Это отобразит реактивную форму, подобную этой.
До сих пор мы не использовали проверку в наших элементах управления формой. Angular предоставляет нам множество валидаторов, таких как maxlength, required и т. д. Чтобы их использовать, не забудьте импортировать валидаторы в класс компонента.
iимпортировать { FormGroup, FormControl, Validators } из ‘@angular/forms’;
Предположим, мы используем валидацию по электронной почте и паролю, вот как это делается.
Внутри app.component.html
Это отображает:
Теперь, когда мы применили проверку к электронной почте и паролю, для класса мы хотим создать проверку для диапазона, чтобы класс был только от 1 до 12. В этом случае нам придется написать собственный валидатор, поскольку Angular не обеспечивает проверку диапазона.
Итак, для этого нам нужно создать функцию, которая принимает один входной параметр типа AbstractControl и возвращает объект пары ключ-значение в случае сбоя проверки.
function classValidator(control: AbstractControl): {[key: string]: boolean} | null {
вернуть null;
}
Здесь мы создали собственный валидатор с именем classValidator, где пользователь сможет ввести класс, только если он находится в заданном диапазоне. В случае сбоя проверки он вернет объект, содержащий пару ключ-значение.
В классе компонента
class: new FormControl(null, [classValidator])
В шаблоне это выглядит так:
Это отобразит:
Вот как пользовательские валидаторы помогают нам проверять наши элементы управления формой.
