Angular自定义验证器报错：AbstractControl与FormGroup类型不兼容

核心问题原因 #

表单级验证器的类型ValidatorFn要求参数为AbstractControl，但你直接声明参数为FormGroup，导致类型不匹配。Angular在调用表单验证器时，传入的是AbstractControl实例（实际是FormGroup，但类型上属于抽象类），因此需要先做类型断言。另外，直接调用setErrors会覆盖字段原有错误（比如required），需要合并错误信息。

修改后的验证器代码 #

import { AbstractControl, FormGroup, ValidationErrors } from '@angular/forms';
// 假设PhoneNumber是你已有的类
import { PhoneNumber } from './path-to-your-phone-number-class';

export const phoneValidator = (control: AbstractControl): ValidationErrors | null => {
  // 断言传入的控制为FormGroup，因为我们明确这是表单级验证器
  const form = control as FormGroup;
  const countryCodeCtrl = form.get('countryCode');
  const phoneNumberCtrl = form.get('phoneNumber');

  // 若字段未填，交给各自的required验证器处理，直接返回
  if (!countryCodeCtrl?.value || !phoneNumberCtrl?.value) {
    return null;
  }

  // 验证手机号格式
  const isPhoneValid = new PhoneNumber(phoneNumberCtrl.value, countryCodeCtrl.value).isValid();

  if (!isPhoneValid) {
    // 合并原有错误，避免覆盖required等其他错误
    phoneNumberCtrl.setErrors({
      ...phoneNumberCtrl.errors,
      countryCodeFormat: true
    });
  } else {
    // 验证通过时，移除countryCodeFormat错误，保留其他错误
    if (phoneNumberCtrl.errors?.countryCodeFormat) {
      delete phoneNumberCtrl.errors.countryCodeFormat;
      // 若无剩余错误，清空errors对象
      if (Object.keys(phoneNumberCtrl.errors!).length === 0) {
        phoneNumberCtrl.setErrors(null);
      }
    }
  }

  // 表单级验证器返回null，仅标记phoneNumber字段为无效，不影响整个表单状态
  return null;
};

表单代码无需修改 #

你的表单初始化代码保持不变，验证器的类型兼容性已修复：

this.registrationForm = new FormGroup({
  firstName: new FormControl('', [Validators.required]),
  lastName: new FormControl('', [Validators.required]),
  emailAddress: new FormControl('', [Validators.required, Validators.email]),
  countryCode: new FormControl(defaultCountry?.value, [Validators.required]),
  countryPhoneCode: new FormControl(defaultCountryCode?.value, [Validators.required]),
  phoneNumber: new FormControl('', [Validators.required]),
  postalCode: new FormControl(''),
}, {validators: [phoneValidator]});

关键说明 #

1. 类型断言：通过control as FormGroup将抽象的AbstractControl转换为具体的FormGroup，解决类型不兼容问题。
2. 错误合并：使用...phoneNumberCtrl.errors保留字段原有错误，避免覆盖required等验证规则的错误信息。
3. 错误清理：验证通过时主动移除对应错误，确保字段状态正确更新。

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