Angular动态表单结合Angular Material展示验证错误报TS7052如何解决

你遍历的Users.controls数组中每一项的默认类型是AbstractControl，TypeScript严格模式下不允许直接通过索引访问AbstractControl上不存在的controls属性，你之前写的user['controls']语法、以及错误的get User() getter（你把users FormArray误强制转为FormGroup，类型完全不匹配）都会触发TS7052类型错误。

方案1：模板直接调用get()方法（最简改法，无需修改TS逻辑） #

AbstractControl原生支持get()方法获取子控件，配合可选链规避空值报错，直接修改模板的验证判断即可：

<div *ngFor="let user of Users.controls; let i = index" [formGroupName]="i">
<mat-form-field>
  <input matInput placeholder="first name" formControlName="fname">
  <mat-error *ngIf="user.get('fname')?.hasError('required')">
        Enter the first name
   </mat-error>
</mat-form-field>
</div>

方案2：添加类型断言辅助方法（类型更安全，适合复杂表单场景） #

在component.ts中新增辅助方法，将FormArray的子项明确断言为FormGroup类型，TypeScript就不会报类型错误：

// 放在component.ts中
getUserFormGroup(index: number): FormGroup {
  return this.Users.at(index) as FormGroup;
}

模板中可以直接调用该方法获取对应索引的FormGroup：

<mat-error *ngIf="getUserFormGroup(i).controls.fname.hasError('required')">
  Enter the first name
</mat-error>

你之前编写的get User()方法逻辑错误，可直接删除：该方法将FormArray类型的users强制转为FormGroup，类型完全不匹配，无法起到任何作用。

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