Angular debounce с маской на входе

Есть HTML <input/>( ReactiveFormsModule), и я хотел бы иметь две (независимые) функции:

  • отклоненный ввод
  • ввод с маской

Я хотел бы применить шаблон единой ответственности :

  • поэтому я реализовал appDebounceInput (используя ControlValueAccessor/CVA)
  • использовал библиотеку для маски — ngx-mask

приложение.компонент.html:

      <input type="text"
       [formControl]="formControl"
       appDebounceInput                <!-- CVA1 -->
       mask="separator.0"              <!-- CVA2 -->
/>

Но это вызывает проблему, потому что теперь есть два CVA (первый из appDebounceInput, второй из mask).

      Error: More than one custom value accessor matches form control with unspecified name attribute

(Да, я знаю, Angular не может иметь два CVA на одном входе.)

Я хотел бы разделить обе функции и использовать их независимо или вместе.

(И я не хочу перемещать логику времени устранения отказов в потребляющем компоненте: this.formGroup.get('money').valueChanges.pipe(debounceTime(500))- Я хочу обновить formGroupпосле времени устранения дребезга.)

Одним из вариантов было бы создать дополнительный компонент и скрыть inputс маской (один CVA) в этом компоненте и реализуйте устранение дребезга сверху, но этот подход скроет собственный HTML (вызывая некоторые другие проблемы, такие как собственные функции ввода, будут скрыты).

Я ищу лучший подход к решению этой проблемы:

  • Единая ответственность за функции
  • иметь обе функции независимыми
  • и иметь возможность использовать их вместе

Любые идеи? :)

Стекблиц .

Источник

0 ответов

Другие вопросы по тегам