Angular严格模式下邮箱表单字段自定义验证器报错如何解决

• 你定义的isValidEmail验证器函数显式声明了返回值类型为ValidationErrors | null，但当!control条件成立时，你直接执行return未指定返回值，此时函数默认返回undefined，和声明的返回类型不匹配，因此触发严格模式下的类型校验报错。

有两种常用修复方式，可根据业务场景选择：

方案1：修改异常分支返回值（最常用） #

将if (!control)分支的返回值改为null即可，null在Angular验证器的语义里代表「校验通过，无错误」，完全符合当前分支的逻辑预期：

static isValidEmail(control: AbstractControl): ValidationErrors | null {
    if (!control) return null; // 这里返回null代替默认的undefined
    const regex = new RegExp(..email regex..);
    if (regex.test(control.value)) return null;
    return { isValidEmail: true };
}

方案2：移除无用的control非空判断 #

Angular框架调用自定义验证器时，一定会传入合法的AbstractControl实例，不会出现control为undefined或null的情况，你可以直接删掉这个冗余的判断语句，也能解决报错：

static isValidEmail(control: AbstractControl): ValidationErrors | null {
    const regex = new RegExp(..email regex..);
    if (regex.test(control.value)) return null;
    return { isValidEmail: true };
}

你可以把邮箱正则提前声明为类的静态常量，避免每次触发验证时都重新创建正则实例，提升性能：

// 类内部提前定义正则常量
private static readonly EMAIL_REGEX = new RegExp(/* 你的邮箱正则规则 */);

static isValidEmail(control: AbstractControl): ValidationErrors | null {
    if (CustomFormValidators.EMAIL_REGEX.test(control.value)) return null;
    return { isValidEmail: true };
}

内容的提问来源于stack exchange，提问作者Rafael de Castro