Angular Material 2：手动标记嵌套响应式表单无效控件

我之前也踩过这个嵌套表单的坑——Angular Material的mat-form-field-invalid和mat-input-invalid样式类确实不会自动穿透嵌套组件的控件，你的思路完全正确：通过手动标记无效控件的状态，就能让样式正常显示。下面是具体可落地的实现方案：

核心思路 #

Angular Material的错误样式只有在控件处于**invalid + (touched 或表单 submitted)**状态时才会触发。嵌套组件里的控件因为层级关系，表单提交时的状态不会自动同步到它们身上，所以我们需要手动遍历所有无效控件，强制更新它们的状态。

具体实现步骤 #

1. 在父组件中编写遍历并标记无效控件的方法
   这个方法会递归遍历整个FormGroup（包括嵌套的子FormGroup），找到所有无效控件并标记为touched，确保Material能识别到需要显示错误样式：

   onSubmit() {
     // 先检查表单整体是否无效
     if (this.parentForm.invalid) {
       // 遍历所有无效控件并标记为已触碰
       this.markAllInvalidControlsAsTouched(this.parentForm);
       return;
     }
     // 这里写你的表单提交逻辑
     console.log('表单提交成功');
   }
   
   private markAllInvalidControlsAsTouched(formGroup: FormGroup): void {
     // 遍历表单组的所有控件
     Object.keys(formGroup.controls).forEach(key => {
       const control = formGroup.get(key);
       
       if (control instanceof FormGroup) {
         // 如果是嵌套的FormGroup，递归处理子表单
         this.markAllInvalidControlsAsTouched(control);
       } else {
         // 仅对无效控件进行标记
         if (control.invalid) {
           control.markAsTouched({ onlySelf: true });
           // 强制更新控件状态，确保组件检测到变化
           control.updateValueAndValidity({ emitEvent: false });
         }
       }
     });
   }
   

2. 确保子组件正确关联父表单控件
   子组件需要通过@Input()接收父表单的FormGroup或FormControl，确保控件属于同一个表单树，这样父组件的遍历才能找到它们：

   子组件示例：

   import { Component, Input } from '@angular/core';
   import { FormGroup, FormControl } from '@angular/forms';
   
   @Component({
     selector: 'app-child-input',
     template: `
       <mat-form-field appearance="outline">
         <input matInput formControlName="username" placeholder="用户名">
         <mat-error *ngIf="usernameControl.invalid">
           {{ usernameControl.hasError('required') ? '用户名不能为空' : '格式不正确' }}
         </mat-error>
       </mat-form-field>
     `
   })
   export class ChildInputComponent {
     @Input() childFormGroup: FormGroup;
   
     get usernameControl(): FormControl {
       return this.childFormGroup.get('username') as FormControl;
     }
   }
   

   父组件模板中使用子组件：

   <form [formGroup]="parentForm" (ngSubmit)="onSubmit()">
     <!-- 嵌套子组件，传入对应的子FormGroup -->
     <app-child-input [childFormGroup]="parentForm.get('userInfo') as FormGroup"></app-child-input>
     
     <button mat-raised-button color="primary" type="submit">提交表单</button>
   </form>
   

为什么这个方案有效？ #

当你点击提交按钮后，父组件的markAllInvalidControlsAsTouched方法会遍历所有无效控件，包括子组件里的，把它们标记为touched。此时控件满足invalid + touched的条件，Angular Material就会自动为对应的mat-form-field和input添加mat-form-field-invalid、mat-input-invalid样式类，红色错误样式就正常显示了。

内容的提问来源于stack exchange，提问作者Pablo De Luca