为Angular Material所有必填字段添加“Required”占位文本

问题描述 #

我想实现一个全局效果：所有设置了required="true"的<input matInput>字段，自动显示"Required"作为占位文本，效果和手动写下面的代码完全一致：

<mat-form-field>
  <input formControlName="fieldName" matInput required="true" placeholder="Required">
</mat-form-field>

但要求通过编程方式自动实现，而且表单字段的必填状态是组件初始化时根据多种条件动态设置的，希望这个效果能覆盖Angular应用的所有组件/页面，而不是只在单个组件里生效。

解决方案1：自定义全局指令（推荐） #

通过创建Angular指令，监听输入框的required属性变化，以及对应FormControl的必填状态变化，自动同步占位符。这是最灵活、覆盖场景最广的方案。

步骤1：创建指令文件required-placeholder.directive.ts #

import { Directive, ElementRef, Input, OnChanges, SimpleChanges } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: 'input[matInput][required], input[matInput][formControl], input[matInput][formControlName]',
  standalone: true // Angular 14+独立组件模式可加，传统模块模式去掉
})
export class RequiredPlaceholderDirective implements OnChanges {
  @Input() required?: boolean | string;

  constructor(private el: ElementRef<HTMLInputElement>, private ngControl: NgControl) {}

  ngOnChanges(changes: SimpleChanges): void {
    this.updatePlaceholder();
    // 监听FormControl状态变化，处理动态设置必填的场景
    this.ngControl.control?.statusChanges.subscribe(() => {
      this.updatePlaceholder();
    });
  }

  private updatePlaceholder(): void {
    const isRequired = this.isFieldRequired();
    // 仅当字段必填且无自定义占位符时，自动设置为"Required"
    if (isRequired && !this.el.nativeElement.placeholder) {
      this.el.nativeElement.placeholder = 'Required';
    } else if (!isRequired) {
      // 非必填时，清空自动设置的占位符（保留用户自定义的）
      if (this.el.nativeElement.placeholder === 'Required') {
        this.el.nativeElement.placeholder = '';
      }
    }
  }

  private isFieldRequired(): boolean {
    // 优先检查标签上的required属性值
    if (this.required !== undefined) {
      return this.required === true || this.required === 'true';
    }
    // 再检查FormControl的校验规则是否包含必填
    return this.ngControl.control?.hasError('required') ?? false;
  }
}

步骤2：全局注册指令 #

• 独立组件模式：在app.config.ts的declarations中添加该指令，确保全局可用
• 传统模块模式：在AppModule的declarations和exports中添加该指令，所有子模块会自动继承

解决方案2：MatFormField全局配置（仅静态必填场景） #

如果你的必填状态大多是静态写死的，可以通过修改MatFormField的默认配置辅助实现，但对动态修改必填状态的支持有限，仅作补充参考：

import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';

@NgModule({
  providers: [
    {
      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
      useValue: {
        // 此处无法直接设置占位符，需结合指令逻辑扩展，不如方案1灵活
      }
    }
  ]
})
export class AppModule {}

注意事项 #

• 指令会优先保留用户手动设置的占位符，不会覆盖自定义内容
• 支持动态修改FormControl的必填状态（比如通过setValidators添加/移除Validators.required），状态变化时自动更新占位符
• 覆盖所有带matInput的输入框，包括使用formControl和formControlName的表单字段

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