Угловые динамические формы с mat-select не могут получить доступ к значению

Question

Я пытаюсь использовать mat-select с массивом форм. По какой-то причине это выдает мне следующую ошибку: Нет доступа к значению для элемента управления формы с путем: 'profileGroup -> meterings -> 0 -> selected' для каждого из элементов в массиве.

  <div formGroupName="profileGroup" [class.active]="!show" class="inner-area">
        <mat-form-field formArrayName="meterings">
           <mat-select multiple>
                    <div *ngFor="let metering of meteringArray; let i = index">
                        <div [formGroupName]="i">
                            <mat-option formControlName="selected" [value]="metering.value">
                                {{ metering.value.name }}
                            </mat-option>
                        </div>
                    </div>
          </mat-select>
       </mat-form-field>
<div>

      this.mainForm = this.fb.group({
                profileGroup: this.fb.group({
                    meterings: this.fb.array([]),
                    from: [""],
                    to: [""]
                })
            });
    addMetering(metering: Metering) {
        const control = (this.mainForm.controls["profileGroup"] as FormGroup).get("meterings") as FormArray;
        control.push(this.createItem(metering));
    }
    createItem(metering: Metering): FormGroup {
        return this.fb.group({
            name: metering.name,
            id: metering.meteringId,
            selected: false
        });
    }

    get meteringArray() {
        return ((this.parent.controls["profileGroup"] as FormGroup).get("meterings") as FormArray).controls;
    }

Answer 1

Вы смешиваете разные концепции. Материал, выбранный кратно, это элемент управления, который хранит массив (и массив объектов или массив строк). И вы перебираете простой массив элементов для выбора среди этих элементов. Нет смысла использовать FormArray или добавлять элементы в Array. Поэтому я полагаю, что у вас есть что-то вроде

meterings=[
  {name:"metering 1",id:1}
  {name:"metering 2",id:2}
  {name:"metering 3",id:2}
]
this.mainForm = this.fb.group({
   profileGroup: this.fb.group({
     meterings: [[]],
     from: [""],
     to: [""]
   })
});

.html

<div formGroupName="profileGroup" [class.active]="!show" class="inner-area">
   <mat-form-field >
     <mat-select fromGroupName="meterings">
         <mat-option *ngFor="let metering of meterings; let i = index"
                  [value]="metering.value">
            {{ metering.value.name }}
         </mat-option>
      </mat-select>
    </mat-form-field>
<div>

И ваша форма может принимать значения, например

mainform={
   profileGroup:{
       metering:[1,2]
       from:''
       to:''
   }
}

Другое дело, что выхотите иметь FormArray из FormControls, как вы задали в своем вопросе. Но тогда вы не будете использовать несколько

 this.mainForm = this.fb.group({
   profileGroup: this.fb.group({
      meterings: this.fb.array([]),
      from: [""],
      to: [""]
   })
 });

.html

<div formGroupName="profileGroup" [class.active]="!show" class="inner-area">
   <mat-form-field formArrayName="meterings">
       <div *ngFor="let metering of meteringArray; let i = index" [formGroupName]="i">
         <mat-checkbox formControlName="selected">
         </mat-checkbox>
         <input mat-input formControlName="name">
         <input mat-input formControlName="id">
      </div>
   </mat-form-field>
</div>

И ваше значение может быть как

mainform={
   profileGroup:{
       metering:[
          {id:1,name:"metering 1",true},
          {id:1,name:"metering 1",false}
       ]
       from:''
       to:''
   }
}