Angular FormGroup跨字段验证：如何识别触发验证的字段

Angular的表单级验证器本身不会直接提供触发验证的字段信息，因为验证会在表单或任意字段值变更时整体执行。可以通过以下两种思路实现需求：

思路1：监听字段值变更，记录最后修改的字段 #

在组件中维护一个变量记录最后变更的字段，通过订阅目标字段的valueChanges更新该变量，之后在验证器中读取这个变量即可知晓触发源。

具体实现代码 #

1. 在组件类中定义变量存储最后变更字段：

private lastChangedField: string;

2. 在ngOnInit中订阅目标字段的valueChanges：

ngOnInit() {
  this.elaborazioneForm = new FormGroup({
    anno: new FormControl('', [Validators.required]),
    modello: new FormControl('', [Validators.required]),
    tipo: new FormControl('', [Validators.required]),
    nProtocollo: new FormControl({ value: null, disabled: true })
  }, { validators: this.checkAnno });

  // 订阅anno字段的变更
  this.elaborazioneForm.get('anno').valueChanges.subscribe(() => {
    this.lastChangedField = 'anno';
  });

  // 订阅modello字段的变更
  this.elaborazioneForm.get('modello').valueChanges.subscribe(() => {
    this.lastChangedField = 'modello';
  });
}

3. 修改验证器函数，确保能访问组件上下文并读取记录的字段：

// 使用箭头函数定义验证器，避免this上下文丢失
checkAnno: ValidatorFn = (formGroup: FormGroup) => {
  // 此处即可获取触发验证的字段
  console.log('触发验证的字段：', this.lastChangedField);

  const annoValue = formGroup.get('anno').value;
  const modelloValue = formGroup.get('modello').value;

  if (annoValue && modelloValue && Math.abs(parseInt(modelloValue, 10) - parseInt(annoValue, 10)) >= 2) {
    formGroup.get('anno').setErrors({ twoYearsOrMore: true });
    formGroup.get('modello').setErrors({ twoYearsOrMore: true });
    return { twoYearsOrMore: true };
  } else {
    // 保留required错误，仅清除自定义验证错误
    const annoErrors = formGroup.get('anno').hasError('required') ? { required: true } : null;
    const modelloErrors = formGroup.get('modello').hasError('required') ? { required: true } : null;
    
    formGroup.get('anno').setErrors(annoErrors);
    formGroup.get('modello').setErrors(modelloErrors);
    return null;
  }
};

思路2：利用控件的dirty状态结合变更顺序（局限性较大） #

如果只需要区分首次变更的字段，可以通过检查控件的dirty状态，但如果两个字段都被修改过，这种方法无法确定最后触发的字段，仅适用于简单场景：

checkAnno: ValidatorFn = (formGroup: FormGroup) => {
  const annoCtrl = formGroup.get('anno');
  const modelloCtrl = formGroup.get('modello');
  
  let triggerField: string;
  if (annoCtrl.dirty && !modelloCtrl.dirty) {
    triggerField = 'anno';
  } else if (modelloCtrl.dirty && !annoCtrl.dirty) {
    triggerField = 'modello';
  } else if (annoCtrl.dirty && modelloCtrl.dirty) {
    // 无法确定最后触发的字段，需结合思路1的方法
    triggerField = this.lastChangedField;
  }

  console.log('触发验证的字段：', triggerField);
  // 后续验证逻辑...
};

注意事项 #

• 直接使用setErrors(null)会清除控件的所有错误（包括内置的required），建议根据实际情况保留原生验证错误，仅清除自定义错误。
• 若表单初始化时就触发验证（比如初始值不符合规则），lastChangedField会为undefined，可根据需求添加默认处理逻辑。

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