Какие бывают типы функций валидаторов?

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

Существует несколько типов валидаторов, которые могут быть использованы для различных случаев:

1. Синхронные валидаторы

Синхронные валидаторы возвращают состояние валидности немедленно, как только форма или элемент формы изменяются. Они выполняют проверку входных значений и возвращают объект ошибки или null, если ошибки нет.

Пример синхронного валидатора

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

export function customValidator(control: AbstractControl): ValidationErrors | null {
  const forbiddenValue = 'test';
  return control.value === forbiddenValue ? { forbiddenName: { value: control.value } } : null;
}

В этом примере валидатор проверяет, равно ли введенное значение слову "test". Если да, то он возвращает объект ошибки; если нет — null.

Чтобы использовать этот валидатор в форме, можно сделать так:

import { FormBuilder, FormGroup } from '@angular/forms';

export class ExampleComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      username: ['', [customValidator]]
    });
  }
}

2. Асинхронные валидаторы

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

Пример асинхронного валидатора

import { AbstractControl, ValidationErrors } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

export function asyncValidator(control: AbstractControl): Observable<ValidationErrors | null> {
  return checkName(control.value).pipe(
    map(isTaken => (isTaken ? { nameTaken: true } : null)),
    catchError(() => of(null))
  );
}

function checkName(name: string): Observable<boolean> {
  // Здесь должен быть вызов на сервер
  return of(name === 'existingUser'); // Пример логики
}

В этом примере валидатор имитирует асинхронный вызов, чтобы проверить, занято ли имя пользователя. Он возвращает true, если имя занято, и false в противном случае.

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

import { FormBuilder, FormGroup } from '@angular/forms';

export class ExampleComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      username: ['', { asyncValidators: [asyncValidator] }]
    });
  }
}

Заключение

Использование валидаторов в Angular позволяет улучшить качество данных, вводимых пользователями, и дать им понятные сообщения об ошибках. To правильно выбрать валидатор, важно учитывать контекст, в котором он будет использоваться, и правила валидации, которые применяются к вашим данным.