Angular自定义验证器异常：空值时返回FormControl对象问题

1. 表单控件定义错误（核心问题） #

你在dateGroup里定义子控件时，错误地将FormControl实例作为初始值传入数组：

beginDate: [this.fb.control(null)], // 这里把FormControl当成了初始值
endDate: [this.fb.control(null)],

这会导致beginDate和endDate的value不是预期的null或日期，而是一个FormControl对象——这就是你console.log时看到控件对象的原因，自然无法触发空值判断逻辑。

2. 修正表单代码 #

把子控件的定义改成普通的初始值格式，直接用null作为初始值即可：

this.form = this.fb.group({
  reservationNumber: this.fb.control(null),
  reservationName: this.fb.control(null),
  dateGroup: this.fb.group(
    {
      beginDate: [null], // 直接传初始值，无需嵌套fb.control
      endDate: [null],
    },
    { validators: checkIfEndDateAfterStartDate }
  ),
  organizationName: this.fb.control(null),
  firstName: this.fb.control(null),
  lastName: this.fb.control(null),
});

3. 完善自定义验证器逻辑 #

你的需求是「选一个日期必须同时选另一个」，所以需要补充反向判断（endDate有值但beginDate为空的情况），同时确保空值判断准确：

export function checkIfEndDateAfterStartDate(
  c: AbstractControl
): { [key: string]: boolean } | null {
  const beginDateControl = c.get('beginDate');
  const endDateControl = c.get('endDate');

  // 安全检查：控件不存在则返回null
  if (!beginDateControl || !endDateControl) {
    return null;
  }

  // 两个都未触碰时不验证
  if (beginDateControl.pristine && endDateControl.pristine) {
    return null;
  }

  const beginDate = beginDateControl.value;
  const endDate = endDateControl.value;

  // 一个有值、另一个为空时触发验证错误
  if ((beginDate && !endDate) || (endDate && !beginDate)) {
    return { datesInvalid: true };
  }

  return null;
}

验证逻辑说明 #

• 修正控件定义后，beginDateControl.value会正确返回null或选中的日期值
• 补充了双向判断，覆盖「填了结束日期但没填开始日期」的场景
• 增加了控件存在性检查，避免潜在的空指针问题

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