Angular单字段绑定校验器如何实现跨字段访问其他FormControl值

原有代码问题根源 #

你定义FormGroup时直接将startDate作为参数传入校验函数，此时startDate控件还未完成实例赋值，传入的是undefined，因此校验函数无法获取到正确的控件引用。

方案1：通过父FormGroup获取关联控件（推荐） #

在校验函数中通过当前控件的parent属性获取所属的FormGroup，再通过控件名获取关联字段，无需提前传入控件实例。

自定义校验函数代码 #

import { ValidatorFn, FormControl, FormGroup } from '@angular/forms';
import * as moment from 'moment';

export function DateDifferenceValidation(otherControlName: string): ValidatorFn {
  return function(control: FormControl): { [key: string]: any } | null {
    const parentGroup = control.parent as FormGroup;
    // 父FormGroup或关联控件未初始化时跳过校验
    if (!parentGroup || !parentGroup.contains(otherControlName)) {
      return null;
    }
    const otherControl = parentGroup.get(otherControlName)!;
    const currentDate = control.value;
    const otherDate = otherControl.value;
    // 两个日期都存在时才执行校验
    if (!currentDate || !otherDate) {
      return null;
    }
    const isDateValid = moment(currentDate).isAfter(otherDate);
    return isDateValid ? null : { endDateAfterStart: true };
  }
}

组件内表单定义代码 #

import { FormGroup, FormControl, Validators } from '@angular/forms';

export class SummaryComponent {
  form = new FormGroup({
    startDate: new FormControl(undefined, Validators.required),
    // 直接传入关联控件的名称字符串即可
    endDate: new FormControl(undefined, [Validators.required, DateDifferenceValidation('startDate')]),
    locationDesc: new FormControl(),
    description: new FormControl(),
  });

  ngOnInit() {
    // 监听startDate值变化，手动触发endDate重新校验
    this.form.get('startDate')?.valueChanges.subscribe(() => {
      this.form.get('endDate')?.updateValueAndValidity();
    });
  }
  // 其余业务代码
}

方案2：表单初始化后追加校验器（传入控件实例） #

如果需要直接传入控件实例，可以等FormGroup初始化完成后，再给目标字段追加自定义校验器：

import { FormGroup, FormControl, Validators } from '@angular/forms';

export class SummaryComponent {
  form: FormGroup;

  constructor() {
    // 第一步：先初始化表单所有控件
    this.form = new FormGroup({
      startDate: new FormControl(undefined, Validators.required),
      endDate: new FormControl(undefined, Validators.required),
      locationDesc: new FormControl(),
      description: new FormControl(),
    });

    // 第二步：获取已实例化的控件，给endDate追加校验器
    const startDateControl = this.form.get('startDate')!;
    const endDateControl = this.form.get('endDate')!;
    endDateControl.addValidators(DateDifferenceValidation(startDateControl));

    // 第三步：监听startDate变化触发endDate重校验
    startDateControl.valueChanges.subscribe(() => {
      endDateControl.updateValueAndValidity();
    });
  }
  // 其余业务代码
}

注意事项 #

1. 不要在校验函数中手动调用setErrors方法，Angular会自动将校验函数返回的错误对象合并到控件的errors属性中，手动调用可能覆盖其他校验器返回的错误。
2. 关联字段值变化时不会自动触发当前字段的校验，必须手动调用updateValueAndValidity触发重校验，否则会出现关联字段修改后校验状态不更新的问题。

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