当输入的类型为 Number 时，ValueChanges 在 blur 上触发

Question

我很惊讶地发现，与其他类型的 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

Answer 1

这是 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)'

Answer 2

这似乎是 Angular 某些版本中的一个问题。 Github.

上也有人报告了同样的问题

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

它看起来已在 Angular 10 中修复，只要 @alon 的演示正常运行即可。

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

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

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

当输入的类型为 Number 时，ValueChanges 在 blur 上触发

ValueChanges is triggered on blur when input is of type Number

angular

angular-reactive-forms

angular9