Angular响应式表单使用自定义异步验证器时出现错误

问题代码 #

我尝试在Angular响应式表单中实现自定义异步验证器，确保姓名输入不包含数字，代码如下：

ngOnInit() {
    this.bewerberForm = new FormGroup({
      'name': new FormControl(null, Validators.required, this.containsNumbers),
      'email': new FormControl(null, [Validators.required, Validators.email]),
      // 其他表单控件...
    });
  }

  containsNumbers(control: FormControl): Promise<any> | Observable<any> {
    const promise = new Promise<any>((resolve, reject) => {
      for (let i = 0; i < control.value.length; i++) {
        if (control.value.charAt(i).match('[0-9]')) {
          resolve({ 'nameIsForbidden': true });
          break;
        } else {
          resolve(null);
        }
      }
    });
    return promise;
  }

报错信息 #

运行时报出类型不匹配错误：

没有匹配的重载调用。
重载1（共5个）：'(value: FormControlState | null, opts: FormControlOptions, asyncValidator: AsyncValidatorFn | AsyncValidatorFn[]): FormControl<...>'，给出以下错误：
类型'(control: AbstractControl<any, any>) => ValidationErrors | null'与类型'FormControlOptions'无共同属性。
重载2（共5个）：'(value: FormControlState | null, validatorOrOpts?: FormControlOptions | ValidatorFn | ValidatorFn[] | null | undefined, asyncValidator?: AsyncValidatorFn | ... 2 more ... | undefined): FormControl<...>'，给出以下错误：
参数类型'(control: FormControl) => Promise | Observable'不能赋值给类型'AsyncValidatorFn | AsyncValidatorFn[] | null | undefined'。
类型'(control: FormControl) => Promise | Observable'不能赋值给类型'AsyncValidatorFn'。
参数'control'和'control'的类型不兼容。
类型'AbstractControl<any, any>'缺少类型'FormControl'的以下属性：defaultValue、registerOnChange、registerOnDisabledChange

问题原因与修复方案 #

1. 验证器参数类型不匹配 #

Angular的AsyncValidatorFn接口要求参数为AbstractControl（FormControl是它的子类），而你的验证器函数参数定义为FormControl，导致类型不兼容。

2. 验证逻辑存在Bug #

原循环中只要第一个字符不是数字就直接resolve(null)，不会检查后续字符，无法正确判断整个字符串是否包含数字。

3. 可选：绑定组件上下文 #

如果验证器后续需要访问组件属性，必须绑定this，避免上下文丢失。

修正后的代码 #

import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
import { Observable } from 'rxjs';

// ...组件类代码

ngOnInit() {
    this.bewerberForm = new FormGroup({
      'name': new FormControl(null, Validators.required, this.containsNumbers.bind(this)),
      'email': new FormControl(null, [Validators.required, Validators.email]),
      // 其他表单控件...
    });
  }

  containsNumbers(control: AbstractControl): Promise<any> | Observable<any> {
    return new Promise((resolve) => {
      // 处理空值情况，避免报错
      if (!control.value) {
        resolve(null);
        return;
      }
      // 用正则表达式高效判断是否包含数字
      const hasNumericChar = /\d/.test(control.value);
      resolve(hasNumericChar ? { 'nameContainsNumber': true } : null);
    });
  }

代码说明 #

• 将验证器参数类型改为AbstractControl，符合AsyncValidatorFn的类型要求，解决类型不匹配问题。
• 使用正则表达式/\d/.test()替代循环判断，更简洁高效，同时修复了原逻辑的Bug。
• 添加bind(this)确保验证器函数中的this指向组件实例，为后续扩展预留空间。

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