В этой статье мы узнаем, как создать собственный асинхронный валидатор и использовать его с Angular ReactiveForms.

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

При изменении имени мы спрашиваем сервер, существует ли это имя уже, и отображаем соответствующее сообщение пользователю. Довольно просто, правда?

Но есть лучший и более чистый способ сделать это, используя AsyncValidator:

Отлично!

Теперь рассмотрим случай, когда вам нужно более одной проверки на сервере. В первом варианте вам нужно будет добавить еще одну подписку, поддерживать еще один флаг и шаблонный код.
Но с помощью решения AsyncValidator вместе с combineLatest мы можем поддерживать столько проверок сервера, сколько захотим!

И теперь каждую новую валидацию, которую мы добавляем, можно легко поддерживать.

Особая благодарность Инбалу Синаю за помощь в написании статьи.

Что нельзя пропустить: