Angular动态表单三日期顺序自定义校验器触发异常求助

问题核心 #

你的自定义校验器绑定在单个日期控件上，导致仅当该控件值变化时才会触发校验。修改第一个日期时，第二个、第三个控件的校验器不会自动运行，因此无法检测到顺序违规。

解决方案一：表单组级别校验（推荐） #

将校验逻辑放在表单组上，只要组内任意控件值变化，就会触发整个组的校验，确保所有日期顺序都能被检测到。

1. 编写组级别校验器 #

import { AbstractControl, FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';

export function dateSequenceValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const formGroup = control as FormGroup;
    const date1 = formGroup.get('date1')?.value;
    const date2 = formGroup.get('date2')?.value;
    const date3 = formGroup.get('date3')?.value;

    // 空值跳过校验
    if (!date1 || !date2 || !date3) return null;

    const d1 = new Date(date1);
    const d2 = new Date(date2);
    const d3 = new Date(date3);

    let groupErrors: ValidationErrors = {};

    // 校验第二个日期是否晚于第一个
    if (d2 <= d1) {
      groupErrors['date2NotAfterDate1'] = '第二个日期必须晚于第一个';
      // 给date2控件单独设置错误，方便模板提示
      const date2Errors = { ...formGroup.get('date2')?.errors, 'date2NotAfterDate1': true };
      formGroup.get('date2')?.setErrors(Object.keys(date2Errors).length ? date2Errors : null);
    } else {
      // 移除已修复的错误
      const date2Errors = formGroup.get('date2')?.errors;
      if (date2Errors && date2Errors['date2NotAfterDate1']) {
        delete date2Errors['date2NotAfterDate1'];
        formGroup.get('date2')?.setErrors(Object.keys(date2Errors).length ? date2Errors : null);
      }
    }

    // 校验第三个日期是否晚于第二个
    if (d3 <= d2) {
      groupErrors['date3NotAfterDate2'] = '第三个日期必须晚于第二个';
      const date3Errors = { ...formGroup.get('date3')?.errors, 'date3NotAfterDate2': true };
      formGroup.get('date3')?.setErrors(Object.keys(date3Errors).length ? date3Errors : null);
    } else {
      const date3Errors = formGroup.get('date3')?.errors;
      if (date3Errors && date3Errors['date3NotAfterDate2']) {
        delete date3Errors['date3NotAfterDate2'];
        formGroup.get('date3')?.setErrors(Object.keys(date3Errors).length ? date3Errors : null);
      }
    }

    return Object.keys(groupErrors).length ? groupErrors : null;
  };
}

2. 绑定到表单组 #

创建表单时，将校验器添加到表单组的validators配置中：

this.dynamicForm = this.fb.group({
  checkbox: [false],
  date1: [''],
  date2: [''],
  date3: ['']
}, { validators: [dateSequenceValidator()] });

3. 模板中显示错误 #

可以针对单个控件或整个表单组显示错误提示：

<div [formGroup]="dynamicForm">
  <input type="checkbox" formControlName="checkbox"> 显示日期
  <div *ngIf="dynamicForm.get('checkbox')?.value">
    <input type="date" formControlName="date1">
    <input type="date" formControlName="date2">
    <div *ngIf="dynamicForm.get('date2')?.errors?.date2NotAfterDate1">
      第二个日期必须晚于第一个
    </div>
    <input type="date" formControlName="date3">
    <div *ngIf="dynamicForm.get('date3')?.errors?.date3NotAfterDate2">
      第三个日期必须晚于第二个
    </div>
  </div>
</div>

解决方案二：手动触发其他控件校验 #

如果坚持使用单个控件的校验器，可通过监听控件值变化，手动触发其他控件的校验：

// 监听date1变化，触发date2和date3的校验
this.dynamicForm.get('date1')?.valueChanges.subscribe(() => {
  this.dynamicForm.get('date2')?.updateValueAndValidity({ emitEvent: false });
  this.dynamicForm.get('date3')?.updateValueAndValidity({ emitEvent: false });
});

// 监听date2变化，触发date1和date3的校验
this.dynamicForm.get('date2')?.valueChanges.subscribe(() => {
  this.dynamicForm.get('date1')?.updateValueAndValidity({ emitEvent: false });
  this.dynamicForm.get('date3')?.updateValueAndValidity({ emitEvent: false });
});

// 监听date3变化，触发date1和date2的校验
this.dynamicForm.get('date3')?.valueChanges.subscribe(() => {
  this.dynamicForm.get('date1')?.updateValueAndValidity({ emitEvent: false });
  this.dynamicForm.get('date2')?.updateValueAndValidity({ emitEvent: false });
});

注意：添加emitEvent: false是为了避免触发valueChanges的循环订阅。

为什么原方案失效 #

Angular默认仅在控件自身值变化时触发其绑定的校验器。你的beforeDatevalidator绑在date2和date3上，修改date1时，这两个控件的值没变化，所以校验器不会运行，自然无法检测到顺序问题。

内容的提问来源于stack exchange，提问作者shine-dev