Angular自定义密码匹配校验器报类型不匹配错误问题求助

问题修复方案 #

核心错误点 #

• 自定义校验器未正确封装到CustomValidators类中，且调用名称和定义名称不一致
• 校验器内读取的确认密码字段名与表单实际定义的字段名不匹配
• 校验器未正确标注类型导致类型校验不通过

修正代码 #

1. custom-validators.ts

import { ValidationErrors, ValidatorFn, AbstractControl } from '@angular/forms';

// 导出CustomValidators工具类
export class CustomValidators {
  // 静态校验器，名称和表单调用的保持一致，明确标注ValidatorFn类型
  static passwordMatchValidator: ValidatorFn = (group: AbstractControl): ValidationErrors | null => { 
    const pass = group.get('password')?.value;
    // 字段名和表单内的confirmationPassword保持一致
    const confirmPass = group.get('confirmationPassword')?.value;
    return pass === confirmPass ? null : { notSame: true };
  }
}

2. 表单类可选优化（兼容所有Angular版本）

如果修改完校验器还有类型报错，将FormGroup第二个参数的validator改为validators传数组即可：

// 原来的第二个参数
{
  validator: CustomValidators.passwordMatchValidator
}
// 替换为
{
  validators: [CustomValidators.passwordMatchValidator]
}

验证效果 #

修改完成后类型报错会消失，表单会自动校验密码和确认密码是否一致，校验不通过时表单的errors属性会携带notSame: true标识。

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