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

Posted 2023-02-22

【中文标题】事件处理程序中的 preventDefault() 禁止更改检测

【英文标题】：preventDefault() in Event Handler Suppresses Change Detection

【发布时间】：2020-07-17 09:18:01

【问题描述】：

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

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

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

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

【参考方案1】：

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

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