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

Пользовательские валидаторы в Angular предоставляют нам гибкость приложения специфической, пользовательской логики валидации к элементам формы. Как указано в викторинном вопросе, пользовательский валидатор создаётся путём написания функции, которая возвращает объект валидации.

Пример Создания Пользовательского Валидатора

Предположим, у вас есть элемент формы, который принимает возраст пользователя. И вы хотите убедиться, что пользователь ввёл возраст от 18 до 100 лет.

import { AbstractControl, ValidationErrors } from '@angular/forms';

export function ageRangeValidator(control: AbstractControl): ValidationErrors | null {
  let value = control.value;
  if (value < 18 || value > 100) {
    return { 'ageRange': 'Возраст должен быть от 18 до 100 лет' };
  }
  return null;
}

В этом примере функция ageRangeValidator() принимает AbstractControl в качестве аргумента, который представляет элемент формы. Внутри функции мы проверяем значение на диапазон возраста. Если значение выходит за пределы диапазона, функция возвращает объект ошибки валидации. Если значение удовлетворяет условиям, функция возвращает null.

Когда мы применим этот валидатор к полю ввода формы, Angular будет автоматически проверять введённое значение и при необходимости показывать сообщение об ошибке.

Применение Валидатора в Форме

import { FormBuilder, Validators } from '@angular/forms';
import { ageRangeValidator } from './age-range.validator';

...

this.form = this.formBuilder.group({
  age: ['', [Validators.required, ageRangeValidator]]
});

В приведённом выше примере применяется наш пользовательский валидатор ageRangeValidator, а также встроенный валидатор Validators.required к полю формы age.

Основная идея здесь состоит в том, что когда валидаторы определены как функции, их можно легко повторно использовать в любом месте приложения. Это делает ваш код более управляемым и поддерживаемым.