Angular响应式表单自定义requiredFieldValidator校验指令未生效问题

问题排查与修复方案 #

你现有代码存在3处核心错误，对应修复逻辑如下： #

1. 指令使用方式完全错误

你把自定义指令声明和输入参数写在了[ngClass]的配置里，这是完全不符合Angular语法的：自定义指令需要作为元素的独立属性声明，写在ngClass里不会触发指令实例化，等于没有使用这个指令。
同时[ngClass]的条件需要接收布尔值，你传入了普通字符串，永远不会触发isError类的添加。

2. 校验器返回值不符合Angular规范

Validator接口的validate方法要求：校验通过时返回null，校验不通过时返回包含错误标识的对象，你当前直接返回布尔值，Angular无法识别校验结果。

3. 遗漏指令注册

自定义指令需要在对应模块的declarations数组中注册，否则Angular无法识别该指令。 #

修正后代码 #

模板代码

<div>
  <label>Phone number</label>
  <input 
    type="text" 
    placeholder="Phone number" 
    formControlName="phoneNo"  
    <!-- 指令作为独立属性声明 -->
    requiredFieldValidator 
    <!-- 输入参数单独绑定 -->
    [submitted]="submitted"
    <!-- 绑定校验状态判断条件，替换formGroup为你自己定义的表单组变量名 -->
    [ngClass]="{'isError': formGroup.get('phoneNo')?.invalid && (formGroup.get('phoneNo')?.touched || submitted)}"
  />
</div>

指令代码

@Directive({
    selector: '[requiredFieldValidator]',
    providers: [{ provide: NG_VALIDATORS, useExisting: RequiredFieldValidatorDirective , multi: true}]
})
export class RequiredFieldValidatorDirective implements Validator {
    @Input() submitted: boolean = false;

    validate(control: AbstractControl): { [key: string]: any } | null {
        // 校验不通过返回错误对象，通过返回null
        if ((this.submitted || control.touched) && control.errors?.required) {
            return { requiredFieldInvalid: true };
        }
        return null;
    }
}

额外注意事项 #

• 表单提交事件触发时，要手动给submitted变量赋值为true，才能触发提交后的全表单校验逻辑
• 你也可以直接匹配指令抛出的错误标识来控制样式，写法为：[ngClass]="{'isError': formGroup.get('phoneNo')?.hasError('requiredFieldInvalid')}"

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