如何让Angular自定义Validator在组件加载时自动触发校验

Angular模板驱动表单（基于ngModel实现）默认仅在用户与控件发生交互（输入内容、失焦等）时才会触发校验逻辑。页面刚加载完成时，输入框控件处于pristine（未被修改）状态，框架不会主动运行你定义的自定义校验器，因此txtBoxNumber.errors初始值为null。

最常用的实现方式是组件初始化完成后，手动触发一次输入框控件的校验，步骤如下：

1. 在你的组件类中，通过@ViewChild注解拿到模板中输入框对应的NgModel实例
2. 在ngAfterViewInit生命周期钩子中调用控件的updateValueAndValidity方法主动触发校验

对应组件类代码示例：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { NgModel } from '@angular/forms';

@Component({
  selector: 'your-component-selector', // 替换为你的组件选择器
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  // 绑定模板中定义的#txtBoxNumber引用
  @ViewChild('txtBoxNumber') txtBoxNumber!: NgModel;
  // 你的原有业务变量
  ecMinVal1 = 10; // 替换为你的实际最小值配置
  value = 0; // 替换为你的输入框初始绑定值

  ngAfterViewInit(): void {
    // 套一层setTimeout是为了避免Angular抛出变更检测前后值不一致的错误
    setTimeout(() => {
      this.txtBoxNumber.control.updateValueAndValidity();
    }, 0);
  }

  // 你原有组件的其他逻辑
  onFocus(e: Event) {
    // 原有逻辑
  }
  change(val: number) {
    // 原有逻辑
  }
}

修改完成后页面加载完毕就会自动运行自定义校验器，只要初始value小于ecMinVal1就会直接显示错误提示。

你当前自定义校验器的类名ecMinVal不符合TypeScript类名首字母大写的通用规范，建议修改为EcMinValDirective，避免后续代码校验工具报错。

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