Angular中FormGroup使用pairwise仅捕获首个字段变化的问题排查

你的问题核心出在distinctUntilChanged()的默认比较逻辑上，同时可能存在对Angular表单值变化机制的误解：

1. 关键问题：distinctUntilChanged()的默认比较器 #

Angular的FormGroup.valueChanges每次发出的表单值是新创建的对象（因为form.value getter每次都会返回新对象），但distinctUntilChanged()默认使用**严格相等（===）**比较值。这种比较方式只判断对象引用是否相同，而非内容是否变化。

但在你的场景中，首次字段变化时，初始值（startWith提供）和变化后的值是不同引用，所以能通过过滤；但如果后续字段变化时，出现了引用相同但内容不同的极端情况（比如自定义控件复用了值对象引用），distinctUntilChanged()会误判为值未变化，从而过滤掉后续的变更事件。

另外，对于表单场景，distinctUntilChanged()本身是多余的——因为Angular每次值变化都会返回新对象，默认比较器会认为每次都不同，这个操作不会起到过滤重复的作用，反而可能引入隐藏问题。

2. 修复方案 #

直接移除distinctUntilChanged()即可，修改后的代码如下：

const formGroupControls = this.parent.get(Form_Group_Config)! as FormGroup;

formGroupControls.valueChanges
    .pipe(
        startWith(formGroupControls.value),
        pairwise(),
        takeUntil(this.unsubscribe$)
    )
    .subscribe(([prevValue, currValue]) => {
        console.log("前后状态对: ", prevValue, currValue);
    })

如果确实需要过滤内容完全相同的重复状态（比如多次修改但值未变），可以使用深度比较的自定义比较器（比如借助Lodash的isEqual，或自行实现深度比较函数）：

// 先导入Lodash的isEqual（或自行实现深度比较）
import { isEqual } from 'lodash';

const formGroupControls = this.parent.get(Form_Group_Config)! as FormGroup;

formGroupControls.valueChanges
    .pipe(
        startWith(formGroupControls.value),
        distinctUntilChanged((prev, curr) => isEqual(prev, curr)),
        pairwise(),
        takeUntil(this.unsubscribe$)
    )
    .subscribe(([prevValue, currValue]) => {
        console.log("前后状态对: ", prevValue, currValue);
    })

3. 额外排查点 #

如果修改后仍有问题，检查以下两点：

• 确保所有字段都正确初始化为FormControl/FormGroup/FormArray实例（比如使用field1: new FormControl()或FormBuilder的标准语法），未正确初始化的控件不会触发表单的valueChanges。
• 修改字段值时必须使用Angular的setValue()/patchValue()方法，直接修改form.value的属性不会触发变更检测。

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