Angular Reactive Forms如何给label标签添加ng-invalid等表单验证类

有三种常用实现方式，可根据你的项目场景选择：

方案1：直接绑定表单控件状态（最稳妥，无兼容性问题） #

不需要强行同步Angular自动生成的ng-*类，直接利用响应式表单控件暴露的状态属性，给label绑定自定义类即可：

<!-- 给label绑定对应表单控件的验证状态 -->
<label 
  for="myfield" 
  [class.text-red]="mygroup.get('myfieldname')?.invalid && mygroup.get('myfieldname')?.touched"
>
  This is a label
</label>
<mat-form-field class="col3 no-bottom dense" id="myfield" appearance="fill">
  <mat-label>field label</mat-label>
  <input matInput placeholder="Year" mask="0000" formControlName="myfieldname">
</mat-form-field>

对应添加CSS：

.text-red {
  color: #f44336;
}

如果要完全复用Angular自带的ng-invalid、ng-touched类，也可以直接把绑定的类名改成对应的ng-*类即可。

方案2：CSS兄弟选择器实现（无业务代码侵入） #

如果你的label和表单控件是同级兄弟元素，可以直接用CSS匹配，不需要修改TS/模板逻辑：

/* 匹配for属性对应表单控件失效且被触摸过的label */
label[for="myfield"]:has(+ #myfield.ng-invalid.ng-touched) {
  color: #f44336;
}

注意：:has()选择器属于CSS相对新的特性，支持Chrome 105+、Firefox 121+、Safari 15.4+，如果需要兼容低版本浏览器不建议使用。

方案3：自定义指令自动同步类（适合多表单复用场景） #

如果项目中有大量这类需求，可以写一个全局指令，自动给所有关联的label同步表单控件的ng-*验证类，一次编写到处使用：

1. 先创建指令：

import { Directive, ElementRef, OnInit } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[formControlName], [formGroupName]'
})
export class SyncLabelValidationDirective implements OnInit {
  constructor(private el: ElementRef<HTMLElement>, private control: NgControl) {}

  ngOnInit() {
    const fieldId = this.el.nativeElement.id;
    if (!fieldId) return;
    const relatedLabel = document.querySelector<HTMLLabelElement>(`label[for="${fieldId}"]`);
    if (!relatedLabel) return;

    // 监听控件状态变化，同步所有ng-开头的验证类
    this.control.statusChanges?.subscribe(() => {
      // 清空旧的验证类
      Array.from(relatedLabel.classList)
        .filter(cls => cls.startsWith('ng-'))
        .forEach(cls => relatedLabel.classList.remove(cls));
      // 添加当前最新的验证类
      const currentNgClasses = Array.from(this.el.nativeElement.classList)
        .filter(cls => cls.startsWith('ng-'));
      relatedLabel.classList.add(...currentNgClasses);
    });
  }
}

2. 把指令在你对应的功能模块或者共享模块的declarations数组中声明即可，不需要修改任何现有业务代码，所有带formControlName/formGroupName且有id的元素，都会自动同步验证类到对应for属性的label上。

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