0Pricing
Angular Academy · Урок

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

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

«Асинхронные валидаторы» — бесплатный урок Angular Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Отложенная проверка

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

Тип AsyncValidatorFn

Асинхронный валидатор принимает элемент управления и возвращает Observable<ValidationErrors | null> (или Promise).

const v: AsyncValidatorFn = (control) => {
  return checkAvailable(control.value);
};

Возврат null означает корректность

Возвращайте null, если значение корректно, или объект ошибки, например { taken: true }, если оно некорректно — точно так же, как в синхронных валидаторах.

Валидатор имени пользователя

Этот валидатор вызывает службу и преобразует результат.

usernameValidator(api: UserApi): AsyncValidatorFn {
  return (control) =>
    api.isTaken(control.value).pipe(
      map(taken => taken ? { taken: true } : null)
    );
}

Регистрация валидатора

Асинхронные валидаторы передаются третьим аргументом элемента управления, отдельно от синхронных валидаторов.

new FormControl('', {
  validators: [Validators.required],
  asyncValidators: [usernameValidator(api)]
});

Состояние PENDING

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

@if (form.controls.username.pending) {
  <span>Checking...</span>
}

Устранение частых запросов

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

return timer(300).pipe(
  switchMap(() => api.isTaken(control.value)),
  map(taken => taken ? { taken: true } : null)
);

switchMap отменяет устаревшие вызовы

Использование switchMap отменяет предыдущий выполняющийся запрос при очередном изменении значения, поэтому важен только последний результат.

Стратегия updateOn

Установите updateOn: 'blur', чтобы асинхронная проверка выполнялась только после ухода пользователя из поля, уменьшая количество запросов.

new FormControl('', {
  asyncValidators: [usernameValidator(api)],
  updateOn: 'blur'
});

Чтение ошибки

Отображайте ошибку после завершения проверки, когда элемент управления изменён или отмечен как посещённый.

@if (form.controls.username.hasError('taken')) {
  <span>Username already taken</span>
}

Рекомендации

Всегда устраняйте частые запросы, отменяйте устаревшие запросы, показывайте индикатор ожидания и обрабатывайте сетевые ошибки, чтобы форма не застревала в состоянии PENDING.

Быстрая проверка

Проверьте, насколько хорошо Вы поняли асинхронные валидаторы.

Повторение

Вы узнали, что AsyncValidatorFn возвращает Observable/Promise со значением ValidationErrors | null и регистрируется третьим аргументом элемента управления, переводя его в состояние PENDING. Используйте задержку и switchMap для управления запросами к серверу.

Часто задаваемые вопросы

Урок «Асинхронные валидаторы» бесплатный?

Да — полный текст урока «Асинхронные валидаторы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Асинхронные валидаторы»?

Асинхронно проверяйте данные на сервере Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Асинхронные валидаторы»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Типизированные реактивные формы
  2. FormArray и динамические поля
  3. Асинхронные валидаторы
  4. Шаблоны FormBuilder
← Назад к Angular Academy