响应式表单在内部对象内渲染数组答案

【问题标题】：Reactive forms render array inside an inner object响应式表单在内部对象内渲染数组
【发布时间】：2022-11-29 02:49:28
【问题描述】：

我的打字稿中有默认的最严格设置。我有以下表格设置：

this.myForm = this.fBuilder.group({
  data: this.fBuilder.group({
    program_types: this.fBuilder.array([])
  })
});

哪个有效。

但是模板在尝试执行时会抛出错误：

<form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value)" #form="ngForm">
    <div formGroupName="data">
        <div class="simple-checkbox-options" formArrayName="program_types">
            <ng-container
                *ngFor="let program_type of myForm.controls.data.controls.program_types.controls; let i=index">
                <ng-container [formGroupName]="i">

                </ng-container>
            </ng-container>
        </div>
    </div>
</form>

错误：Property 'controls' does not exist on type 'AbstractControl<any, any>'.

然后我尝试了：*ngFor="let program_type of myForm.get('data.program_types')['controls']; let i=index"

但这随后出现了这个错误：Element implicitly has an 'any' type because expression of type '"controls"' can't be used to index type 'AbstractControl<any, any>'.

有任何想法吗？

【问题讨论】：

标签： angular

【解决方案1】：

AbstractControl 是 Form 组的基类，这就是为什么会出现此错误，使用 getter 是解决这些问题的简单方法。

get program_types(){
  return this.myForm.get('data')?.get('program_types') as FormArray
}

<ng-container
  *ngFor="let program_type of program_types.controls; let i = index"
>
  <ng-container [formGroupName]="i"> </ng-container>
</ng-container>

【讨论】：