Angular Material mat-select in FormArray and formGroup

Question

I have a formgroup which contains 2 mat-select and an input field. In the first group I select a value from the first mat-select and accordingly the second mat-select gets populated with data for that selected value from the first mat-select. Then I select a value form the second mat-select and then enter a value in the third control which is a simple input. Then I press a button to add another formgroup, now when I select a value from the first mat-select the value of the second mat-select in the previous grouparray disappears from view but when I check the form values, it is there. I dont understand what is triggering tis event. Can somebody please help me find the cause and resolve the issue.

<div formArrayName="rawmaterialwh">
                <div [formGroupName]="i" *ngFor="let product of products.controls; let i=index">
                   <legend>{{i+1}}</legend>
                     <div class="form-group row">
                      <div fxLayout="row wrap" fxLayoutAlign="space-between center">
                         <mat-form-field>
                            <mat-select formControlName="supplier" class="form-control"
                               (selectionChange)="onSupplierValueChange($event)" placeholder="Supplier">
                               <mat-option disabled selected hidden>Supplier</mat-option>
                               <mat-option *ngFor="let supplier_mode of supplierOption"
                                  [value]="supplier_mode.supplierid">{{supplier_mode.name}}</mat-option>
                            </mat-select>
                         </mat-form-field>
                      </div>
                   </div>
                   <div class="form-group row">
                      <div fxLayout="row wrap" fxLayoutAlign="space-between center">
                         <mat-form-field>
                            <mat-select formControlName="rawmaterialid" class="form-control" placeholder="Raw Material"
                               (selectionChange)="onProductValueChange($event)">
                               <mat-option disabled selected hidden>Product</mat-option>
                               <mat-option *ngFor="let product_mode of productOption"
                                  [value]="product_mode.rawmaterialid">{{product_mode.rawmaterialname}}</mat-option>
                            </mat-select>
                         </mat-form-field>
                         <div fxFlex.gt-sm="49" fxFlex.gt-xs="49" fxFlex="100">
                            <mat-form-field class="full-wid mrgn-b-md">
                               <input matInput placeholder="Quantity" formControlName="qty" id="{{ 'qty' + i }}">
                            </mat-form-field>
                         </div>
                         <button *ngIf="!_isUpdating" class="mrgn-all-xs" class="mrgn-all-xs" mat-mini-fab color="warn"
                            (click)="deleteProduct(i)">
                            <mat-icon>delete</mat-icon>
                         </button>
                      </div>
                   </div>
                </div>
             </div>

Eliseo Eliseo · Accepted Answer · 2020-12-26T10:11:37

The problem is that you use the same variable for all the second mat-select (you need use an array).

So imagine you define

productOption:any[]=[];

When you change the suplier, pass the index futhermore the value

<mat-select formControlName="supplier"
            (selectionChange)="onSupplierValueChange($event,i)">

onSupplierValueChange(suplierId,index){
   //I imagine you has some like
   this.productOption[index]=this.list.find(x=>x.id=supplierId).options
   //or you call to an API o whatever, but remember you change
   this.productOption[index]=... 

}

Then just iterate over this.productOption[i] in the second mat-select

<mat-select formControlName="rawmaterialid" ...>
   <mat-option disabled selected hidden>Product</mat-option>
   <mat-option *ngFor="let product_mode of productOption[i]"
           [value]="product_mode.rawmaterialid">
           ....
    </mat-option>
 </mat-select>

Angular Material mat-select in FormArray and formGroup

1 Answers