当输入为 Number 类型时，在模糊时触发 ValueChanges答案

【问题标题】：ValueChanges is triggered on blur when input is of type Number当输入为 Number 类型时，在模糊时触发 ValueChanges
【发布时间】：2020-11-15 12:40:02
【问题描述】：

我很惊讶地发现，与其他类型的 HTML 输入不同，在 Number 类型的输入中键入会在模糊时触发 valueChanges，以及单击微调器（侧面的小箭头）会触发两次valueChanges，这是预期的行为吗？我错过了什么吗？

组件：

export class AppComponent {

  textControl = new FormControl();
  numberControl = new FormControl();

  ngOnInit(): void {
    this.textControl.valueChanges.subscribe(console.log)
    this.numberControl.valueChanges.subscribe(console.log)
  }

}

模板：

<input type="text" [formControl]="numberControl">
<input type="number" [formControl]="textControl">

这是 Stackblitz demo

【问题讨论】：

也许我不明白你的意思，但是这个 stackblitz，有你的代码和 valueChanges 正在按预期记录更改/keydown stackblitz.com/edit/…
尝试在类型 number 的输入中按任意数字，然后在该输入之外单击，您会看到该值已被写入控制台两次
这不会发生在 @alou 的 stackblitz 中
@alou 看看我在回答中发布的演示
哦，真的发生了..

标签： angular angular-reactive-forms angular9

【解决方案1】：

在某些版本的 Angular 中看起来这是一个问题。有人也在 Github 上报告了同样的问题。

https://github.com/angular/angular/issues/26054

只要@alon 的演示正常工作，它看起来就在 Angular 10 中得到修复。

我相信这对您来说不是关键问题。

但是，一种简单的解决方案是使用distinctUntilChanged 运算符。

this.numberControl.valueChanges
  .pipe(distinctUntilChanged())
  .subscribe(console.log)

【讨论】：

您的解决方案很棒，但是当输入嵌套在有更多控件的 groupForm 中时会变得更加复杂，您必须在 distinctUntilChanged 中实施自己的比较策略

【解决方案2】：

这是a known issue，已在 Angular 10 中修复

Forked Stackblitz with Angular 10

在此修复之前 Angular listed to two events:

host: {
    '(change)': 'onChange($event.target.value)',
    '(input)': 'onChange($event.target.value)',

从 Angular 10 开始，它只监听一个：

host: {
     '(input)': 'onChange($event.target.value)'

【讨论】：