Angular：number类型字段FormGroup.valueChanges为何在change和blur时均触发？

嘿，这个问题我碰到过好几次了，是Angular表单结合浏览器原生行为搞出来的小坑，我给你理清楚原因和解决办法：

为什么number类型字段会触发两次valueChanges？ #

这其实是浏览器原生行为+Angular表单控件的处理逻辑共同导致的：

• 当你在number输入框里输入内容、点击上下箭头调整数值时，浏览器会触发input事件，Angular同步更新表单控件的value，这时候valueChanges第一次触发。
• 当输入框失去焦点（blur）时，如果浏览器检测到当前输入不符合number类型规范（比如输了字母），会自动把value修正成合法值（比如清空或还原成之前的有效数字），这个修正会触发change事件，Angular再次更新控件value，就导致valueChanges第二次触发。
• 哪怕你输入的是合法数字，部分浏览器在blur时也会对数值做格式化（比如去掉末尾多余的小数点），同样会触发value变化，让valueChanges再跑一次。

而text类型输入框不存在这种浏览器自动修正value的行为，所以只有输入时触发一次valueChanges，blur时不会额外触发。

如何阻止number字段的valueChanges重复触发？ #

给你几个实用的方案，按需选就行：

1. 用RxJS的distinctUntilChanged过滤重复值 #

这是最省心的方法，直接用RxJS操作符忽略掉和上一次完全相同的value，这样即使浏览器修正后的value和之前一致，也不会触发订阅逻辑：

// 针对单个number字段
this.form.get('yourNumberField').valueChanges.pipe(
  distinctUntilChanged()
).subscribe(value => {
  // 这里只会在value真正变化时执行
});

// 如果是整个表单的valueChanges，也可以用同样的方式
this.form.valueChanges.pipe(
  distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr))
).subscribe(formValue => {
  // 处理表单值变化
});

2. 自定义number输入控件（ControlValueAccessor） #

如果需要更精细的控制，比如完全接管value的更新逻辑，可以自定义一个number输入控件，只监听input事件来更新value，跳过浏览器blur时的自动修正：

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-custom-number-input',
  template: `
    <input 
      type="number" 
      (input)="handleInput($event.target.value)" 
      [value]="currentValue"
      (blur)="onTouched()">
  `,
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomNumberInputComponent),
    multi: true
  }]
})
export class CustomNumberInputComponent implements ControlValueAccessor {
  currentValue: number | null = null;
  private onChange: (value: number | null) => void = () => {};
  private onTouched: () => void = () => {};

  handleInput(inputValue: string) {
    const parsedValue = parseFloat(inputValue);
    this.currentValue = isNaN(parsedValue) ? null : parsedValue;
    this.onChange(this.currentValue);
  }

  writeValue(value: number | null): void {
    this.currentValue = value;
  }

  registerOnChange(fn: (value: number | null) => void): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }
}

之后在模板里用<app-custom-number-input formControlName="yourNumberField"></app-custom-number-input>就行，完全自己控制value的更新时机。

3. 限制浏览器的自动修正行为（效果有限） #

可以给number输入框加step="any"和pattern属性，减少浏览器自动修正的场景，但这个方法不是所有浏览器都生效：

<input type="number" step="any" pattern="[0-9.]+" formControlName="yourNumberField">

step="any"允许输入任意小数，pattern限制只能输入数字和小数点，但部分浏览器还是会在blur时做修正，所以优先级不如前两种方法。

内容的提问来源于stack exchange，提问作者Mateusz Klimentowicz