Angular 14嵌套表单字段验证失效：原因排查与解决方法

错误分析 #

你当前的操作存在两个核心错误：

1. 直接访问根表单不存在的控件：form.controls['companyName']写法错误，companyName是嵌套在workInfo子FormGroup中的控件，根表单的controls集合里并没有companyName这个键，直接访问会返回undefined，后续读取errors自然触发Cannot read properties of undefined错误。
2. 错误使用路径语法访问控件：form.controls['workInfo.companyName']的写法不成立，FormGroup的controls属性仅支持通过直接控件名称访问，不支持点分隔的嵌套路径。

解决方案 #

以下是几种简单可靠的实现方式，按推荐优先级排序：

方式1：利用FormGroup的get()方法（支持路径） #

FormGroup的get()方法支持通过点分隔的路径直接获取嵌套控件，模板里可以直接这么写：

<div formGroupName="workInfo">
    <mat-form-field appearance="outline" floatLabel="always">
        <mat-label>Company name:</mat-label>
        <input matInput formControlName="companyName">
        <mat-error *ngIf="form.get('workInfo.companyName')?.errors?.['required']">
            What company do you work for?
        </mat-error>
    </mat-form-field>
</div>

方式2：在子FormGroup上下文内访问控件 #

因为已经通过formGroupName="workInfo"声明了当前上下文是子FormGroup，所以可以直接用get()方法在当前上下文获取控件：

<div formGroupName="workInfo">
    <mat-form-field appearance="outline" floatLabel="always">
        <mat-label>Company name:</mat-label>
        <input matInput formControlName="companyName">
        <mat-error *ngIf="get('companyName')?.errors?.['required']">
            What company do you work for?
        </mat-error>
    </mat-form-field>
</div>

方式3：组件内定义Getter简化模板 #

在组件的TypeScript代码里添加Getter，把嵌套控件的访问逻辑封装起来，模板代码会更简洁易读：

export class FormComponent implements OnInit {
  // ... 原有代码

  // 定义Getter获取子表单和控件
  get workInfoForm(): FormGroup {
    return this.form.get('workInfo') as FormGroup;
  }

  get companyNameControl(): FormControl {
    return this.workInfoForm.get('companyName') as FormControl;
  }
}

然后模板里直接调用Getter：

<div formGroupName="workInfo">
    <mat-form-field appearance="outline" floatLabel="always">
        <mat-label>Company name:</mat-label>
        <input matInput formControlName="companyName">
        <mat-error *ngIf="companyNameControl?.errors?.['required']">
            What company do you work for?
        </mat-error>
    </mat-form-field>
</div>

额外提示 #

Angular Material的mat-error默认只会在控件invalid且touched（已触摸）或表单已提交时显示，如果你希望更灵活控制显示时机，可以结合form.submitted状态：

<mat-error *ngIf="companyNameControl.invalid && (companyNameControl.touched || form.submitted)">
    What company do you work for?
</mat-error>

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