如何在表单数组中访问表单控件值:

Question

在表单组中有一个表单数组。我试图访问该表单数组中的表单控件的值。当我试图访问控制得到一个错误Property 'controls' does not exist on type 'AbstractControl<any, any>'.

我想这样{{ employmentControls[index]['controls'].designation}}访问控制。我在谷歌上搜索并尝试了一些东西来修复输入错误，但没有运气。谁能告诉我如何解决这个问题?

HTML——

<form [formGroup]="employmentForm">
<ng-container formArrayName="employments">
<ng-container
*ngFor="
let employment of employments.controls;
let index = index
"
>
<div [formGroupName]="index" style="margin-bottom: 100px">
<div>
{{ employmentControls[index]['controls'].designation}}
</div>
</div>
</ng-container>
</ng-container>
</form>

打印稿:

initEmploymentForm(): void {
this.employmentForm = this._formBuilder.group({
employments: this._formBuilder.array([])
});
}
get employments(): FormArray {
return this.employmentForm.get('employments') as FormArray;
}
get employmentControls(): AbstractControl<FromGroup>[] {
return (this.employmentForm.get('employments') as FormArray).controls;
}

Answer 1

我相信你在使用Angular 14时，响应式表单默认是严格类型的。

你可以使用.get()来获取表单控件，如下所示:

{{ employmentControls[index].get('designation')!.value }}

StackBlitz Demo示例