如何根据Angular响应式表单包含字段的验证状态为Div设置样式？

针对手动列举字段判断错误的痛点，最优方案是利用Angular响应式表单的层级结构，结合递归检查实现通用逻辑，无需手动维护字段列表。

核心思路 #

1. 将逻辑块内的字段封装到独立的FormGroup中，让表单结构和UI逻辑块一一对应，完全脱离DOM依赖。
2. 编写通用递归方法，自动遍历FormGroup下所有嵌套控件，判断是否存在已触碰且无效的控件。

完整实现代码 #

import { Component } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="form">
      <input formControlName="name">
      <div class="div-address" [class.div-error]="hasBlockErrors(form.get('addressBlock') as FormGroup)">
        <div class="div-text">Address</div>
        <div formGroupName="addressBlock">
          <input formControlName="addressType">
          <div formGroupName="address">
            <input formControlName="street">
            <input formControlName="city">
          </div>
        </div>
      </div>
    </form>
  `,
  styles: [
    `
      input.ng-invalid.ng-touched {border-color: red;}
      .div-error .div-text {color: red;}
    `
  ]
})
export class AppComponent {
  protected form = this.fb.group({
    name: ['', Validators.required],
    addressBlock: this.fb.group({
      addressType: ['office', Validators.required],
      address: this.fb.group({
        street: ['', Validators.required],
        city: ['', Validators.required],
      })
    })
  });

  constructor(private fb: FormBuilder) {}

  hasBlockErrors(formGroup: FormGroup): boolean {
    const checkControls = (group: FormGroup): boolean => {
      return Object.values(group.controls).some(control => {
        if (control instanceof FormGroup) {
          return checkControls(control);
        }
        // 仅针对已触碰的无效控件高亮，避免初始状态误触发
        return control.invalid && control.touched;
      });
    };

    return formGroup ? checkControls(formGroup) : false;
  }
}

方案优势 #

• 无手动维护成本：新增/移除逻辑块内的字段时，只需调整对应的FormGroup结构，无需修改错误检查代码。
• 响应式设计贴合：完全基于表单控件状态判断，不依赖DOM操作，符合Angular响应式表单的设计理念。
• 递归适配嵌套结构：支持任意层级的嵌套FormGroup，无论表单结构多复杂都能自动适配。

备选方案（无需重构表单） #

如果无法重构现有表单结构，可通过传入控件路径数组实现通用检查：

// 修改检查方法
hasBlockErrors(controlPaths: string[][]): boolean {
  return controlPaths.some(path => {
    const control = this.form.get(path);
    return control ? control.invalid && control.touched : false;
  });
}

// 模板调用
<div class="div-address" [class.div-error]="hasBlockErrors([['addressType'], ['address', 'street'], ['address', 'city']])">

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