如何使用formgroup的formarray进行角度选择

Question

我正在处理一个工件，其中我需要一个可以选择多个值的材料选择框。选择框中的值来自具有对象数组的API。我的要求是，当用户在选择框中选择任何值时，创建一个表单组的形式数组。

例如：

选择框有类别列表。类别列表基本上是一个类别对象的列表。当我选择任何类别值时，我希望窗体创建一个类别对象的形式数组。

.html:

<div formArrayName="category">
<div *ngFor="let x of myForm.get('category')['controls'];let i = index">
<div [formGroupName]="i">
<mat-form-field appearance="outline">
<mat-label>Category</mat-label>
<mat-select [formControlName]="name" multiple>
<mat-option [value]="category.name"
*ngFor="let category of categories">
{{category.name}}
</mat-option>
</mat-select>
<!--
<mat-error *ngIf="myForm.controls.category.touched && myForm.controls.category.invalid">
<span *ngIf="myForm.controls.category.errors.required">Please select category</span>
</mat-error>-->
</mat-form-field>
</div>
</div>
</div>

.ts:

category:this.fb.array([this.fb.group({
"name":['']
})]),

当我选择任何值时，我得到的输出就像这个

类别：数组(1(0：name:数组(2(0:"财经"1:"数据科学">

我想要这样的输出：

类别：数组(1(0：name:数组(2(0:"财经"1：name:数组(2(0:"数据科学">

有人能帮我解决这个问题吗？

Answer 1

是

<div *ngFor="let x of myForm.get('category').controls;let i = index">

最好是使用getter，否则Angular会在生产时给你一个错误

get categoriesArray()
{
return this.myForm.get('category') as FormArray
}
//And use
<div *ngFor="let x of categoriesArray.controls;let i = index">

formControlName没有[]

<mat-select formControlName="name" multiple>