Angular表单数组FormArray校验状态未同步更新问题

核心诱因 #

校验器挂载位置错误，导致依赖的关联控件值变更时无法触发重校验

• 现有实现将「subQuota数组总和等于totalQuota值」的自定义校验器直接挂载在subQuota这个FormArray实例上，Angular响应式表单的默认校验触发逻辑为：仅当控件自身值更新、或控件下属的子控件值更新时，才会重跑挂载在该控件上的校验器。
• totalQuota是与subQuota平级、同属外层FormGroup的独立FormControl，它的值变更事件不会通知到平级的subQuota FormArray，自然不会触发FormArray上挂载的校验器重跑。此时FormArray上留存的还是上一次子项变更时计算出的旧错误状态，哪怕数值已经匹配，错误提示也不会消失。

不同场景表现差异的原因 #

• 初始化阶段校验正常：表单首次实例化时会执行全量校验，所有控件值已完成初始化，计算结果准确。
• 新增/修改subQuota子项时校验正常：这类操作属于FormArray内部子控件的状态变更，会自动触发FormArray上的校验器重跑，校验逻辑执行时可以取到当时最新的totalQuota值计算，错误提示可以正常弹出。

修复方案 #

跨关联字段的校验必须挂载到所有关联字段共同的最近祖先FormGroup/FormRecord上，不能挂载在某一个子控件上。

1. 将自定义配额校验器从subQuota FormArray的校验器配置中移除，挪到外层包裹totalQuota和subQuota的FormGroup的校验器配置项中
2. 调整校验器逻辑，从传入的FormGroup实例上分别获取totalQuota值、subQuota数组值计算总和，对比后返回校验结果
3. 错误提示绑定外层FormGroup的校验错误状态，而非原FormArray的错误状态

参考实现代码：

// 表单定义调整：校验器挂载到父级FormGroup
this.quotaForm = this.fb.group({
  totalQuota: [20, [Validators.required]],
  subQuota: this.fb.array([
    this.fb.control(13, [Validators.required]),
    this.fb.control(3, [Validators.required]),
    this.fb.control(4, [Validators.required])
  ])
}, {
  validators: [this.quotaSumMatchValidator()] // 跨字段校验放父级
})

// 校验器逻辑调整
quotaSumMatchValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const parentGroup = control as FormGroup;
    const totalQuota = parentGroup.get('totalQuota')?.value ?? 0;
    const subQuotaArr = parentGroup.get('subQuota') as FormArray;
    const sum = subQuotaArr.controls.reduce((prev, curr) => {
      return prev + (Number(curr.value) || 0);
    }, 0);
    return sum === totalQuota ? null : { quotaSumMismatch: true };
  };
}

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