Angular自定义密码验证器抛出TypeScript错误求助

我编写了一个自定义密码验证器，但它抛出了一些TypeScript错误。以下是验证器代码及报错信息：

验证器代码 #

import { AbstractControl } from '@angular/forms';

export function ValidatePassword(control: AbstractControl): boolean {
    // 大写字母校验
    if (!/[A-Z]/g.test(control.value)) {
        return false;
    }
    // 小写字母校验
    if (!/[a-z]/g.test(control.value)) {
        return false;
    }
    // 数字校验
    if (!/[0-9]/g.test(control.value)) {
        return false
    }
    // 长度校验
    if (control.value.length < 8) {
        return false;
    }
    // 特殊字符校验
    if (control.value) {
        return /(?=.*?[#?!@$%^&*-])/g.test(control.value);
    }

    return true;
}

报错信息 #

No overload matches this call.
  Overload 1 of 5, '(value: string | FormControlState<string>, opts: FormControlOptions & { nonNullable: true; }): FormControl<string>', gave the following error.
    Argument of type '(((control: AbstractControl<any, any>) => ValidationErrors | null) | ((control: AbstractControl<any, any>) => boolean))[]' is not assignable to parameter of type 'FormControlOptions & { nonNullable: true; }'.
      Property 'nonNullable' is missing in type '(((control: AbstractControl<any, any>) => ValidationErrors | null) | ((control: AbstractControl<any, any>) => boolean))[]' but required in type '{ nonNullable: true; }'.
  Overload 2 of 5, '(value: string | FormControlState<string>, opts: FormControlOptions & { initialValueIsDefault: true; }): FormControl<string>', gave the following error.
    Argument of type '(((control: AbstractControl<any, any>) => ValidationErrors | null) | ((control: AbstractControl<any, any>) => boolean))[]' is not assignable to parameter of type 'FormControlOptions & { initialValueIsDefault: true; }'.

错误原因及修复方案 #

1. 验证器返回值类型不符合Angular规范

Angular表单验证器要求返回ValidationErrors | null：

• 验证不通过时，返回包含错误标识的对象（方便模板中根据错误类型给出对应提示）
• 验证通过时，返回null

修正后的验证器代码：

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

export function ValidatePassword(control: AbstractControl): ValidationErrors | null {
    // 大写字母校验
    if (!/[A-Z]/g.test(control.value)) {
        return { noUpperCase: true };
    }
    // 小写字母校验
    if (!/[a-z]/g.test(control.value)) {
        return { noLowerCase: true };
    }
    // 数字校验
    if (!/[0-9]/g.test(control.value)) {
        return { noNumber: true };
    }
    // 长度校验
    if (control.value?.length < 8) {
        return { tooShort: true };
    }
    // 特殊字符校验
    if (!/(?=.*?[#?!@$%^&*-])/g.test(control.value)) {
        return { noSpecialChar: true };
    }

    return null;
}

2. FormControl初始化参数传递错误

报错说明你直接将验证器数组作为第二个参数传给FormControl，但Angular要求第二个参数是FormControlOptions对象，需把验证器放在validators字段中；如果启用了非空特性，还要显式声明nonNullable: true。

正确的FormControl初始化示例：

import { FormControl } from '@angular/forms';
import { ValidatePassword } from './path-to-validator';

// 初始化密码控件
const passwordControl = new FormControl('', {
    validators: [ValidatePassword],
    nonNullable: true // 若需要非空控制，显式声明该属性
});

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