protectDefault () в обработчике событий подавляет обнаружение изменений

Question

Я создал директиву атрибута, предназначенную для работы с HTML <input> элементами. При каждом нажатии клавиши я буду sh, чтобы отключить поведение браузера по умолчанию и реализовать свое собственное специальное поведение.

Поэтому в своей директиве я реализовал обработчик событий keydown, где я вызываю preventDefault() в передается в объекте события и задает значение элемента <input>, присваивая значение this.el.nativeElement.value.

. Однако это имеет неожиданное следствие - предотвращение распространения изменений значения элемента <input> на базовые объекты управления формой. (т.е. в реактивных формах).

Я создал (несколько надуманный) минимальное воспроизведение этого вопроса здесь: https://stackblitz.com/edit/angular9-directive-event-handler-issue

Answer 1

Это просто случай неправильного инструмента для задания.

Если кто-то хочет напрямую писать в собственный элемент в DOM и поддерживать двустороннее обнаружение изменений, он должен реализовать ControlValueAccessor интерфейс.

Answer 2

Из веб-документов MDN :

Метод preventDefault() интерфейса события сообщает агенту пользователя, что если событие не обрабатывается явно, его действие по умолчанию не должно выполняться принято, как обычно. Событие продолжает распространяться как обычно , если только один из его слушателей не вызовет stopPropagation() или stopImmediatePropagation(), любой из которых сразу прекратит распространение.

Если вы хотите добавив ключи к существующему значению, используйте += вместо = при назначении их this.el.nativeElement.value внутри CapitalizeDirective.

if(this.isEnglishLetter(e.key)){
  this.el.nativeElement.value+= e.key.toUpperCase();
}