Angular自定义Validator如何访问表单特定值实现校验

问题1：异步加载邮箱列表的校验实现 #

核心结论 #

不可以在静态校验器内部更新组件上下文的this.emails值。Angular同步自定义校验器设计为纯函数，初始化时绑定的参数不会随组件属性自动更新，在校验器内部修改外部状态会导致数据流混乱、校验触发时机不可控。
你当前代码还存在一个显性错误：初始化校验器时传入的是[this.emails]，相当于把整个邮箱数组包裹为新数组的第一个元素传入，校验器内执行indexOf时实际是在二维数组中匹配邮箱字符串，永远无法得到正确结果。

可行实现方案 #

针对接口一次性加载邮箱列表的场景，等接口返回数据后再追加校验器即可：

1. 表单初始化阶段，email控件仅保留内置的必填、邮箱格式校验，不绑定自定义存在性校验
2. 接口返回邮箱列表数据后，再给email控件追加传入最新邮箱数组的自定义校验器，手动触发控件校验更新
   修正后的代码如下：

// 组件内表单初始化
preferenceForm = new FormGroup({
  contactId : new FormControl({value: ''}, Validators.required),
  email: new FormControl({value: '', disabled: false}, [Validators.required, Validators.email]),
  optionA: new FormControl({value: true, disabled: false}),
  optionB: new FormControl({value: true, disabled: false}),
  optionC: new FormControl({value: false, disabled: false}),
  optionD: new FormControl({value: false, disabled: false}),
});

emails: string[] = [];

ngOnInit() {
  // 调用接口获取邮箱列表
  this.apiService.getEmailList().subscribe(res => {
    this.emails = res;
    const emailControl = this.preferenceForm.get('email');
    // 追加自定义校验器，直接传入最新的邮箱数组（不要包多余的方括号）
    emailControl?.addValidators(CustomValidators.emailAccountValidator(this.emails));
    // 刷新控件校验状态
    emailControl?.updateValueAndValidity();
  })
}

// 修正后的自定义校验器
export class CustomValidators {
  static emailAccountValidator(existEmails: string[]) {
    return (control: AbstractControl): {[key: string]: any } | null => {
      const inputEmail = control.value?.trim();
      // 空值交给Validators.required处理，避免重复报错
      if (!inputEmail) return null;
      return existEmails.includes(inputEmail) ? null : { emailNotExist: true };
    }
  }
}

如果邮箱列表后续会动态更新，每次更新emails数组后手动调用emailControl.updateValueAndValidity()即可触发重新校验。 #

问题2：复选框组跨控件校验取值为undefined问题 #

错误原因 #

跨多个关联控件的校验规则，必须绑定在这些控件共同的父级FormGroup上。你当前把optionValidator绑定在单个复选框FormControl上，单个控件实例不存在子控件，调用control.get('optionA')会直接返回null，取值自然为undefined。

可行实现方案 #

1. 将optionValidator从单个复选框控件的校验器数组中移除，绑定到整个preferenceFormFormGroup上
2. 校验逻辑中明确判断合法规则：要么未勾选D且A/B/C至少勾选一个，要么仅勾选D且A/B/C全部未勾选
   修正后的代码如下：

// 组件内表单初始化，将组校验绑定到FormGroup上
preferenceForm = new FormGroup({
  contactId : new FormControl({value: ''}, Validators.required),
  email: new FormControl({value: '', disabled: false}, [Validators.required, Validators.email]),
  optionA: new FormControl({value: false, disabled: false}),
  optionB: new FormControl({value: false, disabled: false}),
  optionC: new FormControl({value: false, disabled: false}),
  optionD: new FormControl({value: false, disabled: false}),
}, { validators: CustomValidators.optionValidator });

// 修正后的复选框组校验器
static optionValidator(control: AbstractControl) {
  // 此处control为整个preferenceForm实例，可正常获取所有子控件值
  const valA = control.get('optionA')?.value ?? false;
  const valB = control.get('optionB')?.value ?? false;
  const valC = control.get('optionC')?.value ?? false;
  const valD = control.get('optionD')?.value ?? false;

  const abcChecked = valA || valB || valC;
  // 校验合法规则
  const isValid = (!valD && abcChecked) || (valD && !abcChecked);

  return isValid ? null : { optionInvalid: true };
}

注意：FormGroup级别的校验错误挂载在表单实例上，模板中读取错误时需要从表单实例获取，示例：<div *ngIf="preferenceForm.hasError('optionInvalid')">选项选择不合法</div>

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