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

Question

我试图为所有将“required”属性设置为 true 的输入字段显示清晰的“Required”占位符文本。

所以基本相同

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

但以编程方式处理所有必填字段。表单字段的“必填”状态是在组件初始化时根据各种条件设置的。

如果有一种方法可以对 Angular 应用程序的所有组件/页面执行此操作，而不仅仅是一个组件，那就更好了！

Answer 1

看起来你需要一个指令来为你做这件事，我们可以创建一个指令

addPlaceholder

，它首先使用

formControlName

获取

getAttribute

，然后通过

controlContainer.control

获取父表单，最后我们得到访问元素的

FormControl

，检查是否有

required

验证器，最后设置占位符

请参阅以下工作示例！

指令

import { Directive, ElementRef, Inject, Input } from '@angular/core';
import { ControlContainer, FormControl, Validators } from '@angular/forms';

@Directive({
  selector: '[addPlaceholder]',
  standalone: true,
})
export class AddPlaceholderDirective {
  @Input() customPlaceholder = 'required';

  constructor(
    @Inject(ControlContainer) private container: ControlContainer,
    private element: ElementRef
  ) {}

  ngAfterViewInit() {
    const formControlName =
      this.element.nativeElement.getAttribute('formControlName');
    const control: FormControl = this.container?.control?.get(
      formControlName
    ) as FormControl;
    if (control.hasValidator(Validators.required)) {
      this.element.nativeElement.placeholder = 'required!';
    }
  }
}

main.ts

import { Component } from '@angular/core';
import {
  FormControl,
  FormGroup,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { AddPlaceholderDirective } from './add-placeholder.directive';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule, AddPlaceholderDirective],
  template: `
    <form [formGroup]="form">
  <input type="text" formControlName="test" addPlaceholder/>
  <input type="text" formControlName="test2" addPlaceholder/>
  <input type="text" formControlName="test3" addPlaceholder/>
</form>
  `,
})
export class App {
  form = new FormGroup({
    test: new FormControl('', Validators.required),
    test2: new FormControl('', Validators.required),
    test3: new FormControl(''),
  });
}

bootstrapApplication(App);

堆栈闪电战