事件处理程序中的 preventDefault() 禁止更改检测

Question

我创建了一个用于处理 HTML <input> 元素的属性指令。在每次按键时，我希望禁用浏览器的默认行为并实现我自己的特殊行为。

因此，在我的指令中，我实现了一个keydown 事件处理程序，我在传入的事件对象上调用preventDefault()，并通过分配给this.el.nativeElement.value 来设置<input> 元素的值。

但是，这会产生意想不到的后果，即阻止 <input> 元素值的更改传播到底层表单控件对象（即反应式表单）。

我在这里创建了这个问题的（有点做作的）最小再现：https://stackblitz.com/edit/angular9-directive-event-handler-issue

Answer 1

这只是一个错误的工作工具。

如果希望直接写入 DOM 中的本机元素并维护双向更改检测，则应实现 ControlValueAccessor 接口。