Angular ngModelChange Internet Explorer 11

Question

我使用 Angular 4.2.4 和 Angular Material 2.0.0.beta.12，以下是我的表单字段：

<mat-form-field>
    <input matInput placeholder="street" value="{{info.street}}" [(ngModel)]="info.street" (ngModelChange)="formChange()">
</mat-form-field>

在Firefox和Chrome中一切都正常，如果我更改输入值，事件就会触发。但在Internet Explorer 11中，每次加载站点或聚焦输入字段时，ngModelChange都会触发。

有没有解决这个问题的方法？(change)是可以工作的，但只有在我focusout输入时才会触发，这不太实用。

- Grobanix

Answer 1

我发现在Internet Explorer浏览器中，placeholder属性是有所不同的。如果没有它，ngModelChange会按预期工作。

在这种情况下的解决方法是将占位符放在方括号中：

 [placeholder]="'placeholder value'"

我猜测占位符在IE处理输入元素后被添加，这就是为什么IE不会触发ngModelChange事件的原因。

- JSimo

---

很遗憾，这个建议无法解决问题。是否有其他解决方案？ - dave0688

这对我来说是一个占位符。但添加 [placeholder] 没有任何区别。一旦我从文本区域中删除了占位符，事件就不会被触发。 - nircraft

编译器抱怨[占位符]语法，但我在Angular文档中找不到它的任何信息。最好在这里删除占位符。 - java-addict301

真疯狂，这个对我起作用了。我只是把占位符完全删除了。IE11+Angular 11 - William Denman

Answer 2

我怀疑这是因为同时使用了value和ngModel。应该只使用其中一个。

<input matInput placeholder="street" [ngModel]="info.street" (ngModelChange)="formChange()">

或者尝试Grobanix建议的方法：

<input matInput placeholder="street" [ngModel]="info.street" (keypress)="formChange()">

- Vega

---

我按照你的建议更改了输入，但问题仍然存在。 - Grobanix

当页面加载时也会触发。 - Grobanix

可能有些hackish，尝试使用：(focus)="0" - Vega

或者 start = true ....formChange(){ 如果(start) {this.start = false; return} // 其余部分保持不变 } - Vega

我现在使用按键功能，非常感谢您的帮助！ - Grobanix

该解决方案并未解决问题。它仍会在单击时触发事件。 - dave0688