仅当字段类型为“数字”时，FormGroup.valueChanges 才会触发“更改”和“模糊”答案

【问题标题】：FormGroup.valueChanges fires on 'change' & 'blur' only when the field type is "number"仅当字段类型为“数字”时，FormGroup.valueChanges 才会触发“更改”和“模糊”
【发布时间】：2019-07-19 19:41:13
【问题描述】：

问题：

Stackblitz：https://stackblitz.com/edit/angular-feu1az

如果我更改 Text 1 或 Text 2 的值，则事件会触发一次。但是当我更改最后一个字段的值时，它的类型是数字，然后它会在更改和模糊时触发，这会导致我的 webapp 出现一些问题。

问题：

为什么当字段类型为“数字”时，“更改”和“模糊”时会触发“valueChange”事件？

如何防止这种情况发生？

（在 Chrome/Firefox/EDGE 上的行为相同）

【问题讨论】：

不是答案，但似乎与数字字段的那些步进器有关。有趣的是，使用这些步进器（右侧的 chrome）而不是输入数字，您不会得到 valueChange onBlur。

标签： angular

【解决方案1】：

这是众所周知的问题https://github.com/angular/angular/issues/12540

原因是 Angular 监听两个事件 - input 和 change - 用于 input[type=number] 控制。我认为这是有意为之，因为浏览器可以以不同的方式处理这些事件。

您可以使用一个小的解决方法：

<input [type]="'number'"

Forked Stackblitz

或使用distinctUntilChanged 来防止不必要的调用。

【讨论】：