如何使用abstract validators实现表单控件的条件校验

核心逻辑是基于ValidatorFn自定义校验工厂，运行时读取关联控件的当前值判断是否触发必填规则，不要直接绑定固定的Validators.required。

具体实现步骤 #

• 封装可复用的条件必填校验器
  校验函数运行时通过当前控件的parent属性访问同级表单组，拿到依赖的布尔控件值，命中触发条件时就调用内置的Validators.required执行校验，否则直接返回校验通过。

  import { AbstractControl, ValidatorFn, Validators } from '@angular/forms';
  
  function requiredWhen(dependControl: string, triggerValue: boolean): ValidatorFn {
    return (control: AbstractControl): Record<string, any> | null => {
      const formGroup = control.parent;
      if (!formGroup) return null;
      const currentDependValue = formGroup.get(dependControl)?.value;
      return currentDependValue === triggerValue ? Validators.required(control) : null;
    };
  }
  

• 替换控件配置里的validators占位
  给firstName和lastName绑定上面封装的校验器，指定依赖bool控件、值为true时触发必填：

  const controls = [
    {name: "bool", control: new FormControl(false), validators: []},
    {name: "firstName", control: new FormControl(''), validators: [requiredWhen('bool', true)]},
    {name: "lastName", control: new FormControl(''), validators: [requiredWhen('bool', true)]},
  ];
  

• 补全校验状态更新逻辑（必做）
  Angular默认不会在一个控件值变化时自动触发所有同级控件重算校验状态，所以需要监听布尔控件的变化，手动触发两个姓名控件的校验更新，避免切换布尔值后校验状态不刷新的问题：

  // 实例化表单组
  const form = new FormGroup({});
  controls.forEach(config => form.addControl(config.name, config.control, config.validators));
  
  // 监听依赖控件变化，更新关联控件校验状态
  form.get('bool')!.valueChanges.subscribe(() => {
    form.get('firstName')!.updateValueAndValidity();
    form.get('lastName')!.updateValueAndValidity();
  });
  

注意事项 #

• 布尔控件的初始值建议明确设置为true/false，不要留空字符串，避免判断逻辑出现非预期结果
• 如果需要关联的控件不在同一级表单组，只需要调整校验器里formGroup.get()的路径参数即可，核心逻辑不需要改动
• 不要在模板层加判断控制校验规则显示，所有校验逻辑收敛在表单配置层更易维护

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