Angular Reactive Form如何避免相同值触发重复变更事件

触发原因 #

Angular 响应式表单的valueChanges默认只要表单控件绑定的输入框触发了change事件就会推送当前值，不会自动比较新旧值是否相等，所以你选中原有字符替换为相同内容时，输入框的change事件触发，就会导致valueChanges重复触发。 #

可实现的两种方案 #

方案1：使用RxJS的distinctUntilChanged操作符（推荐） #

这是最简洁的实现方式，RxJS的distinctUntilChanged操作符会自动过滤掉和上一次推送相等的值，直接在订阅前加管道即可：
首先导入操作符：

import { distinctUntilChanged } from 'rxjs';

修改原有的订阅逻辑：

constructor(private formBuilder: FormBuilder) {}

ngOnInit(): void {
    const updateOnObj = { updateOn: 'change' };
    this.mainForm = this.formBuilder.group({
      onechar: [ null, Validators.minLength(1) ],
    }, updateOnObj);    
    this.mainForm.valueChanges.pipe(
      // 过滤和上次相同的值
      distinctUntilChanged((prev, curr) => prev.onechar === curr.onechar)
    ).subscribe((formValue: {onechar: string}) => { 
     console.log(`Value changed ${formValue.onechar}.`);
    });
}

注：如果是单个表单控件而非表单组监听valueChanges，可以省略自定义比较函数，直接写distinctUntilChanged()即可。

方案2：手动缓存上一次的值做判断 #

如果不想引入RxJS操作符，可以手动声明变量缓存上一次的有效值，触发事件时先比较再执行业务逻辑：

// 声明变量存储上一次的有效值
private lastInputValue: string | null = null;

constructor(private formBuilder: FormBuilder) {}

ngOnInit(): void {
    const updateOnObj = { updateOn: 'change' };
    this.mainForm = this.formBuilder.group({
      onechar: [ null, Validators.minLength(1) ],
    }, updateOnObj);    
    this.mainForm.valueChanges.subscribe((formValue: {onechar: string}) => { 
      const currentVal = formValue.onechar;
      // 和上一次的值相同直接跳过后续逻辑
      if (currentVal === this.lastInputValue) return;
      // 更新缓存值后执行业务逻辑
      this.lastInputValue = currentVal;
      console.log(`Value changed ${currentVal}.`);
    });
}

内容的提问来源于stack exchange，提问作者L. Kvri