如何显示Angular自定义校验器的错误信息？

1. 颠倒的校验逻辑修正 #

你当前的校验器逻辑是「选中至少一个选项时返回错误」，和需求完全相反。同时建议给错误键设置语义化名称，方便模板识别：

validateMe(control: AbstractControl): { [key: string]: any } | null {
  // 当没有任何症状被选中时，返回错误
  if (!Object.values(control.value).some(e => e === true)) {
    return { noSymptomSelected: true };
  }
  return null;
}

2. 解决TS2533类型错误 #

模板中errors可能为null或undefined，必须用可选链操作符(?.)安全访问，同时要对应校验器返回的错误键名：

<mat-error *ngIf="form.controls['symptoms']?.errors?.noSymptomSelected">
  ERROR! At least 1 checkbox should be selected.
</mat-error>

3. 修复校验器上下文丢失问题 #

直接传递this.validateMe会导致校验器内部this指向异常，两种修复方式任选其一：

• 方式一：绑定上下文

symptoms: FormGroup = new FormGroup({
  symptom1: new FormControl(false),
  symptom2: new FormControl(false),
  symptom3: new FormControl(false)
}, this.validateMe.bind(this))

• 方式二：改用箭头函数

validateMe = (control: AbstractControl): { [key: string]: any } | null => {
  if (!Object.values(control.value).some(e => e === true)) {
    return { noSymptomSelected: true };
  }
  return null;
}

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