Внедрение службы в асинхронный валидатор в Angular

Всякий раз, когда мы используем настраиваемый асинхронный валидатор, в основном мы хотим отправить HTTP-запрос на сервер и проверить ввод на основе ответа. если мы перейдем к Angular Documentation, там нет информации о том, как внедрить сервис в асинхронный валидатор.

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

Итак, если у меня есть следующий валидатор:

Я мог бы обернуть его функцией создателя и передать от него параметры:

Затем я мог бы использовать его где-нибудь в своем приложении, например:

new FormControl("", null, [ usernameValidator(['admin','manager']) ]);

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

У этого решения есть некоторые недостатки

  • Это не слабо связано
  • Мы должны повторять один и тот же код каждый раз, когда используем этот валидатор.

Вот почему есть предпочтительный способ сделать это.

Использование службы для создания валидатора

Помните, что асинхронный валидатор — это просто функция javascript, и ничего больше. Таким образом, мы можем объявить это где угодно, даже в нашем сервисе.

Итак, если мы создадим какую-то async.service службу и объявим там наш асинхронный валидатор, мы сможем внедрить HttpClient в эту службу и использовать его внутри асинхронного валидатора (он будет содержать ссылку на async.service)

Теперь все, что нам нужно сделать, это внедрить эту службу в компонент и использовать ее соответствующим образом.

new FormControl("", null, [ asyncService.usernameValidator() ]);

См. также:  Заполнение баз данных с помощью NestJS
Понравилась статья? Поделиться с друзьями:
IT Шеф
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: