Angular访问FormGroup内控件touched/errors属性报不存在如何解决

错误原因 #

• 你的表单结构为根FormGroup(frmStepper) → FormArray(steps) → 索引0位置的子FormGroup → institutionName控件，你跳过了数组索引取值的步骤直接访问属性，同时类型没有明确声明导致TS校验报错
• 模板中frmStepper.institutionName的写法完全错误，根FormGroup下没有直接挂载institutionName控件

修复方案 #

第一步：修改TS代码 #

调整getter逻辑，明确返回第一个步骤的FormGroup，加类型断言避免TS类型报错：

// 保留原有的formArray getter即可，新增以下两个getter
public get frmStep0Control(): FormGroup {
  // 取steps FormArray中索引为0的子FormGroup，断言为FormGroup类型
  return this.frmStepper.get('steps')?.get(0) as FormGroup;
} 

public get institutionNameControl(): AbstractControl | null {
  return this.frmStep0Control.get('institutionName');
}

第二步：修改模板判断逻辑 #

替换原有的错误校验逻辑，直接通过封装好的getter访问控件属性：

<span class="text-danger"
  *ngIf="institutionNameControl?.touched && institutionNameControl?.errors?.required">
  Nome da Instituição é obrigatória
</span>

额外优化建议 #

如果你使用的是Angular 14及以上版本，可以使用Typed Forms特性给表单定义明确的接口类型，从根源上避免后续再出现类似的属性不存在类型报错。

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