我的表格分布在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>
我知道我要么引用错误的表单部分来进行推送,要么将其设置为抽象控件的公众得到某种程度上的错误。有什么建议吗?我在文档中找不到关于此的任何东西,并且对该问题的其他答案还没有完全解决。
由于FormArraystep2DataArray
嵌套在内部FormGroup(step2
)中,因此您需要指定数组的完整路径。
public get step2DataArray(): AbstractControl[] {
return (this.wizard.get(['step2', 'step2DataArray']) as FormArray).controls;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句