Angular FormArray：无法读取未定义的属性'push'

Question

我的表格分布在3个子组件中。有3个表单组。在第三个组中是一个FormArray。此表单将保存仅为true / false的FormControl。从API调用返回的每个结果一个。当此表单是与主表单完全独立的东西时，此方法就很好了。尝试将其集成到具有组的单个表单中导致以下错误：

Cannot read property 'push' of undefined

更改它如何尝试推送到表单数组会产生“ Push不存在于AbstractControl类型上”错误。这是.ts代码：

public wizard = this.fb.group({
  decisionMaker: this.fb.group({}),
  schedule: this.fb.group({}),
  step2: this.fb.group({
    amount: [0, Validators.required],
    step2DataArray: new FormArray([]),
  }),
});

public get step2DataArray(): AbstractControl[] {
  return (this.wizard.get('step2DataArray') as FormArray).controls;
}

private populateFormArray(): void {
  console.log(this.wizard);
  this.step2DataBehavior.getValue().forEach(() => {
    const control = new FormControl(false);
    (this.wizard.controls.step2DataArray as FormArray).push(control);
  });
}

相关html

 <ng-container [formGroup]="controlContainer.control" class="px-3 py-3">
    <table mat-table [dataSource]="step2DataBehavior | async" class="w-100 mat-elevation-z8">
    <ng-container matColumnDef="inputs">
      <mat-header-cell *matHeaderCellDef></mat-header-cell>
      <mat-cell *matCellDef="let element; let i = index" formArrayName="step2DataArray">
        <mat-checkbox formControlName="step2DataArray[i]" [value]="element.amount"></mat-checkbox>
      </mat-cell>
    </ng-container>
  </table>
</ng-container>

我知道我要么在引用表单的那部分内容时出错，要么将其设置为抽象控件的公众获取某种程度上是错误的。有什么建议吗？我在文档中找不到专门关于此的任何内容，而对该问题的其他答案也没有完全解决。

我的表格分布在3个子组件中。有3个表单组。在第三个组中是一个FormArray。此表单将保存仅为true / false的FormControl。从...

Answer 1

由于FormArray step2DataArray嵌套在内部FormGroup（step2）中，因此您需要指定数组的完整路径。