Иногда нам нужно использовать существующий элемент для управления формы, а не создавать лишнюю обертку для доступа к значению. Один из частых случаев — создание пользовательских компонентов ввода. Следующее изображение описывает нашу цель:
Мы хотим использовать элементы управления формы, переданные через директивы formControl, formControlName или ngModel, в нашем пользовательском компоненте ввода и перенаправить их на внутренний элемент ввода. Давайте рассмотрим два способа, как это можно сделать:
Установка свойства valueAccessor для элемента управления
Первый вариант — использовать NodeInjector и получить ссылку на наш элемент управления, используя провайдер NgControl:
Однако это не сработает, потому что возникнет ошибка циклической зависимости.
Эту проблему можно решить, удалив провайдер, внедрив NgControl и явно установив свойство valueAccessor в значение noop (то есть, не выполняющее никаких действий), так как нас не интересует само значение, нам просто нужно "удовлетворить" Angular.
Теперь мы можем использовать это в нашем компоненте ввода:
Использование Host Directives
Первый метод работает, но всегда кажется "хакерским", так как мы по сути выполняем работу Angular, устанавливая свойство valueAccessor. Теперь мы можем использовать функцию host directives, чтобы получить тот же результат. Сначала создадим NoopValueAccessorDirective:
Следующий шаг — создать такую же функцию injectNgControl, как и раньше, без установки свойства valueAccessor:
Наконец, используем это в нашем компоненте ввода:
Теперь мы можем использовать наш компонент ввода с любым элементом управления, который нам нужен:
Автор статьи Netanel Basal
Источник