Angular是否提供requiredFalse验证器？需实现布尔值为false时表单验证通过

Angular 官方提供的 Validators 工具类中没有内置的 requiredFalse 验证器，但你可以通过自定义验证器轻松实现需求，无需修改现有变量命名。

自定义 requiredFalse 验证器 #

创建一个自定义验证器函数，逻辑简单直接：当控件值为 false 时验证通过（返回 null），否则返回错误信息：

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

export function requiredFalse(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    // 值为 false 时验证通过，否则返回错误对象
    return control.value === false ? null : { requiredFalse: { actualValue: control.value } };
  };
}

两种使用方式 #

1. 表单初始化时直接添加 #

在构建表单组时，把自定义验证器加到对应控件上：

import { FormBuilder, FormGroup } from '@angular/forms';
// 导入上面定义的验证器
import { requiredFalse } from './path-to-your-validators';

// ...

this.myForm = this.fb.group({
  existObjectsWithThisStudyIdControl: [false, [requiredFalse()]]
});

2. 动态添加到已有控件 #

如果你需要在表单创建后动态添加验证器，修改你原来的尝试代码即可：

// 添加自定义验证器
this.myForm.controls.existObjectsWithThisStudyIdControl.addValidators(requiredFalse());
// 更新控件的验证状态，确保新验证器生效
this.myForm.controls.existObjectsWithThisStudyIdControl.updateValueAndValidity();

模板中显示错误提示 #

在模板里通过控件的 hasError('requiredFalse') 判断是否触发验证错误，进而显示提示：

<div *ngIf="myForm.get('existObjectsWithThisStudyIdControl')?.invalid && myForm.get('existObjectsWithThisStudyIdControl')?.touched">
  <span *ngIf="myForm.get('existObjectsWithThisStudyIdControl')?.hasError('requiredFalse')">
    该选项必须处于未选中状态（值为false）才能提交表单
  </span>
</div>

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