Angular 14响应式表单自定义验证器导致必填验证失效问题

问题根源 #

你的表单级自定义验证器中，使用end.setErrors(null)会完全清空endTime控件的所有错误状态，包括Validators.required触发的必填错误，导致必填校验失效。

修复方案 #

修改自定义验证器逻辑，保留控件原有错误，仅添加/移除自定义的invalid错误：

validate(startTime: string, endTime: string) {
  return (formGroup: FormGroup) => {
    const startCtrl = formGroup.controls[startTime];
    const endCtrl = formGroup.controls[endTime];

    // 获取当前控件已有的错误，避免覆盖必填等原生验证错误
    const currentErrors = { ...endCtrl.errors };

    // 仅当两个时间都有值时，才进行时间比较校验
    if (startCtrl.value && endCtrl.value && startCtrl.value > endCtrl.value) {
      currentErrors.invalid = true;
    } else {
      // 移除自定义的invalid错误（如果存在）
      delete currentErrors.invalid;
    }

    // 根据错误对象是否为空，设置控件错误
    endCtrl.setErrors(Object.keys(currentErrors).length ? currentErrors : null);
  };
}

关键说明 #

1. 不要直接用setErrors(null)清空所有错误，而是基于原有错误对象进行修改
2. 增加判断条件，仅当两个时间字段都有值时才执行时间比较，避免干扰必填验证的触发逻辑
3. 修复后，endTime控件的required错误和自定义invalid错误可以同时存在，各自的提示也能正常显示

内容的提问来源于stack exchange，提问作者b.g