как использовать формат групп форм для мат-выбора в angular

Я работаю над частью, где мне нужно поле выбора материала, в котором может быть выбрано несколько значений. Значения в поле выбора поступают из 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":['']
      })]),

когда я выбираю любое значение, я получаю вывод, подобный этому

category: Array(1)
   0:
     name: Array(2)
        0: "Finance & Economics"
        1: "Data Science"

Я хочу, чтобы вывод был таким:

category: Array(1)
   0:
     name: Array(2)
        0: "Finance & Economics"
   1:
     name: Array(2)
        0: "Data Science"

Может кто-нибудь, пожалуйста, помогите мне исправить это?


typescript javascript angular angular-reactive-forms formarray
person Ashish Agrawal    schedule 02.09.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

is

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

Лучше использовать геттер, иначе 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>
person Eliseo    schedule 02.09.2020