Как получить элементы управления FormArray и получить доступ к FormControls внутри - PullRequest
Новая
       83

Как получить элементы управления FormArray и получить доступ к FormControls внутри

0 голосов
/ 16 апреля 2020

Ниже приведены мои HTML: 

<form [formGroup]="allocationForm" autocomplete="off">
          <div fxLayoutAlign="start center" id="allocationsDiv" class="container row">
            <mat-card-title style="text-align: left;">Models
              <button mat-raised-button class="mat-raised-button-custom" style="padding: 3px;"
                (click)="onAddCars()">Add Cars</button></mat-card-title>

            <ng-container formArrayName="allocationsArray">
              <div *ngFor="let ctrl of allocationControls.controls; let i = index" [formGroupName]="i">
                <mat-form-field appearance="outline" style="width: 250px;padding: 3px;">
                  <mat-label>Car Model</mat-label>
                  <mat-select formControlName="carModel" id="carModel"
                    (selectionChange)="filterCarModel($event, i)">
                    <mat-option *ngFor="let models of distinctModels" [value]="models">{{models}
                    </mat-option>
                  </mat-select>
                </mat-form-field>

                <mat-form-field appearance="outline" style="width: 350px;padding: 3px;">
                  <mat-label>Car Submodel</mat-label>
                  <mat-select formControlName="subModel" id="subModel" (selectionChange)="filtersubModel($event)">
                    <mat-option *ngFor="let subModel of subModels[i]" [value]="subModel.itemValue">
                      {{subModel.displayValue}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </ng-container>

             </div>
</form>

onAddCars () похож на 

public onAddCars(){
      this.allocationControls.push(this.formBuilder.group({carModel: '',subModel:''}))
  }

, и я динамически заполняю значения каскадными выпадающими списками. Значения заполнены правильно. Однако мне трудно отобразить «Выбранное» значение в элементе управления subModel Ниже приведен мой pu sh в ts: 

let i =0;
      res["allocationsDTO"].forEach(element => {
      this.allocationControls.push(this.formBuilder.group({carModel: element["carModelType"],
                                                           subModel: this.populatesubModel(element["carModelType"],element["subModel"],i),}));
                                                           i++;                                                          
      var controlName = <FormArray>this.allocationForm.get('allocationsArray');
      controlName.controls.forEach((formElement : FormControl) => {
        formElement.value['product'] = element['subModel'];
      });
      });

populationsubModel () метод заполняет все подмодели для типа модели, и это также работает правильно. subModel.itemValue выше - это элемент ['submodel'] , поэтому для данного элемента ['submodel'] как мне сделать mat-select отобразить правильное значение. Я не знаю, что я делаю неправильно, кто-то может помочь?

...