Angular 13升级至14后出现TypeScript类型不匹配验证错误

问题根源 #

错误提示Argument of type '(((control: AbstractControl<any, any>) => ValidationErrors) | ((pattern: string | RegExp) => ValidatorFn))[]' is not assignable to parameter of type 'string'，说明你在表单控件定义时，把验证器函数数组传给了需要字符串类型的参数。你提供的onLogin方法并非出错位置，问题出在loginForm的表单控件配置代码中。

Angular 14强化了TypeScript类型检查，Angular 13中允许的不规范写法在升级后触发了类型验证。

常见错误场景及修复 #

场景1：未正确调用Validators.pattern函数 #

错误写法（直接传入Validators.pattern函数本身，而非调用后返回的验证器）：

this.loginForm = new FormGroup({
  email: new FormControl('', [Validators.required, Validators.pattern]),
  password: new FormControl('', [Validators.required])
});

修复（调用Validators.pattern并传入正则表达式或字符串规则）：

this.loginForm = new FormGroup({
  email: new FormControl('', [
    Validators.required,
    Validators.pattern(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/)
  ]),
  password: new FormControl('', [Validators.required])
});

场景2：验证器参数位置错误 #

确保FormControl的参数顺序正确：

// 构造参数顺序：初始值 → 同步验证器（可选） → 异步验证器（可选）
new FormControl(initialValue: any, validators?: ValidatorFn | ValidatorFn[] | null, asyncValidators?: AsyncValidatorFn | AsyncValidatorFn[] | null)

若错误地将同步验证器数组放到异步验证器参数位置（第三个参数），会触发类型不匹配，调整参数位置即可。

验证步骤 #

1. 找到组件中loginForm的定义代码
2. 检查所有验证器的写法，确保所有验证器都是调用后的函数实例
3. 确认验证器数组位于FormControl的第二个参数位置

内容的提问来源于stack exchange，提问作者Josseph Felipe Duque Villamil