如何使用formgroups的formarray进行角度的mat-select答案

【问题标题】：how to use formarray of formgroups for mat-select in angular如何使用formgroups的formarray进行角度的mat-select
【发布时间】：2020-12-21 19:54:11
【问题描述】：

我正在制作一个我需要一个可以选择多个值的材料选择框的作品。选择框中的值来自具有对象数组的 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：名称：数组（2） 0：《财经》 1：“数据科学”

我想要这样的输出：

类别：数组(1) 0：名称：数组（2） 0：《财经》 1：名称：数组（2） 0：“数据科学”

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

【问题讨论】：

标签： javascript angular typescript angular-reactive-forms formarray

【解决方案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>

【讨论】：