Angular动态添加必填校验后，如何自动标记必填字段（加星号）？

针对你在Angular 4.1.0 + Material 2.0.0-beta.8中遇到的动态必填字段星号显示问题，我推荐几个优雅的解决方案，避免手动绑定每个字段的繁琐操作：

方案一：自定义指令（最推荐，解耦且灵活） #

创建一个自定义指令，自动监听表单控件的验证器状态，给对应的Material输入容器添加required类，无需手动每个字段配置。

1. 编写指令代码 #

import { Directive, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { FormGroupDirective, FormControl } from '@angular/forms';
import { Subscription } from 'rxjs/Subscription';

@Directive({
  selector: '[formControlName][requiredIndicator]'
})
export class RequiredIndicatorDirective implements OnInit, OnDestroy {
  private controlSubscription: Subscription;
  private containerElement: HTMLElement;

  constructor(
    private el: ElementRef,
    private formGroupDir: FormGroupDirective
  ) {
    // 定位到Material的输入容器
    this.containerElement = this.el.nativeElement.closest('md-input-container');
  }

  ngOnInit() {
    const controlName = this.el.nativeElement.getAttribute('formControlName');
    const control = this.formGroupDir.control.get(controlName) as FormControl;

    if (control) {
      // 初始化时检查必填状态
      this.updateRequiredState(control);
      // 监听控件状态变化（支持后续动态修改验证器的场景）
      this.controlSubscription = control.statusChanges.subscribe(() => {
        this.updateRequiredState(control);
      });
    }
  }

  private updateRequiredState(control: FormControl) {
    // 判断控件是否包含必填验证器
    const isRequired = control.validator && control.validator({} as FormControl)?.required;
    if (this.containerElement) {
      isRequired 
        ? this.containerElement.classList.add('required') 
        : this.containerElement.classList.remove('required');
    }
  }

  ngOnDestroy() {
    // 清理订阅避免内存泄漏
    this.controlSubscription?.unsubscribe();
  }
}

2. 在模板中使用指令 #

只需给需要自动识别必填的输入框添加requiredIndicator指令即可：

<div>
  <form [formGroup]="formGroup">
    <md-input-container>
      <input mdInput type="text" placeholder="name" formControlName="name" requiredIndicator>
    </md-input-container>
    <!-- 其他输入框同理添加指令 -->
  </form>
</div>

3. CSS样式实现星号 #

.required label:after {
  content:" *";
  color: #f44336; /* Material主题的错误色，和字段变红保持一致 */
}

方案二：在generateValidators中同步处理DOM（简单直接） #

如果你的验证器只会在初始化时设置，不需要后续动态修改，可以直接在设置验证器的方法里给对应的容器添加类：

generateValidators(formGroup: FormGroup) {
  Object.keys(this.formGroup.controls).forEach(fieldName => {
    let validators = [];
    const isFieldRequired = /* 从数据库配置判断当前字段是否必填 */;
    
    if(isFieldRequired) {
      validators.push(Validators.required);
    }
    if(/* 其他验证逻辑，比如最大长度 */) {
      validators.push(Validators.maxLength(length));
    }

    // 设置验证器并更新状态
    const control = formGroup.controls[fieldName];
    control.setValidators(validators);
    control.updateValueAndValidity();

    // 给对应的输入容器添加required类
    if(isFieldRequired) {
      // 查找对应字段的md-input-container
      const inputElement = document.querySelector(`[formControlName="${fieldName}"]`);
      if(inputElement) {
        const container = inputElement.closest('md-input-container');
        container?.classList.add('required');
      }
    }
  });
}

这个方法无需额外创建指令，适合简单场景，但耦合了业务逻辑和DOM操作。

方案三：扩展FormControl跟踪必填状态 #

如果你希望完全通过表单控件的状态来控制样式，可以扩展FormControl类，添加isRequired属性：

1. 自定义FormControl #

import { FormControl, Validators } from '@angular/forms';

export class CustomFormControl extends FormControl {
  private _isRequired = false;

  setValidators(newValidators: any[]) {
    super.setValidators(newValidators);
    // 判断验证器数组中是否包含必填验证
    this._isRequired = newValidators?.includes(Validators.required) ?? false;
  }

  get isRequired(): boolean {
    return this._isRequired;
  }
}

2. 创建表单时使用自定义控件 #

// 在组件中初始化表单
this.formGroup = new FormGroup({
  name: new CustomFormControl(''),
  // 其他字段都使用CustomFormControl
});

3. 模板中绑定类 #

<md-input-container [class.required]="formGroup.get('name').isRequired">
  <input mdInput type="text" placeholder="name" formControlName="name">
</md-input-container>

这个方案适合需要在组件逻辑中也用到必填状态的场景，但需要替换所有原生FormControl为自定义类。

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