如何实现自定义Angular控制台警告，禁止绑定FormControl的模板使用required属性

核心需求说明 #

和Angular原生的disabled属性检测逻辑对齐，当开发者在绑定了formControl的输入框模板中直接写required属性，而没有在对应的FormControl实例上添加Validators.required校验器时，控制台抛出告警，强制校验逻辑收敛在业务逻辑层。 #

实现方案 #

方案1：运行时全局检测（最常用，接入成本低） #

通过扩展原生FormControlDirective实现全局检测，无需修改现有业务代码，接入即可生效：

• 自定义和原生formControl同选择器的指令，优先级高于原生指令
• 注入DOM元素实例和对应的FormControl实例，初始化时做属性对比
• 符合告警条件时抛出自定义警告

示例代码：

import { Directive, ElementRef, Self, Optional, AfterViewInit } from '@angular/core';
import { FormControlDirective, Validators } from '@angular/forms';

@Directive({
  selector: '[formControl]',
  standalone: true,
  // 可选配置：自动移除模板中写的required属性，避免和FormControl校验状态冲突
  host: {
    '[attr.required]': 'null'
  }
})
export class ReactiveFormRequiredCheckDirective implements AfterViewInit {
  constructor(
    @Self() @Optional() private controlDir: FormControlDirective,
    private el: ElementRef<HTMLInputElement>
  ) {}

  ngAfterViewInit(): void {
    // 跳过没有绑定FormControl的场景
    if (!this.controlDir?.control) return;

    const hasTemplateRequired = this.el.nativeElement.hasAttribute('required');
    const hasControlRequired = this.controlDir.control.hasValidator(Validators.required);

    if (hasTemplateRequired && !hasControlRequired) {
      console.warn(
        `表单校验逻辑不规范：
        检测到绑定FormControl的输入框在模板中声明了required属性，请将required校验逻辑迁移到.ts文件的FormControl配置中，通过Validators.required添加校验器，避免模板和逻辑层校验状态不一致。`
      );
    }
  }
}

使用方式：将该指令导入到应用根模块/全局共享模块中即可全局生效。 #

方案2：编译期检测（适合大型团队规范强制落地） #

如果希望在开发阶段编译时就拦截不规范写法，而非运行时才告警，可以基于Angular模板编译器（ngtsc）扩展自定义校验规则：

• 编写自定义ngtsc插件，扫描所有模板节点
• 匹配所有绑定了formControl的input节点，判断是否存在静态required属性
• 同步检查对应组件类中FormControl的初始化配置，校验是否添加了Validators.required
• 不符合规范时直接在编译阶段抛出错误，阻断构建

边界场景说明 #

以上默认检测的是模板中静态写死的required属性，如果要覆盖[required]="isNeed"这类动态绑定的场景，可以在指令中添加@Input() required的输入监听，动态对比FormControl的校验器变更即可。

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