How to dynamically add filtered values for Mat-Select dropdown

Question

Please let me know what I should do so that each row of the formArray does not change the values of the already selected values in the other rows?

Please note: Adding controls dynamically and getting the values correctly in the filters work. Its only when I change it, it goes and changes the other dropdowns as well. Thank you.

I have a working FormArray for which the controls are dynamically added at the press of a button. The controls have two dropdowns and depending on the first drop down the value of the second dropdown changes.

However when I add the next dynamic control and change the value of the second dropdown, it resets the value of the first already selected values too. I am using material <mat-select> for these.

My 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" [value]="subModel.itemValue">
                      {{subModel.displayValue}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </ng-container>

             </div>
</form>

The onAddCars() method pushes new controls to the allocationsArray

My ts: for the filterCarModel method

public filterCarModel(e:any,ind:any)
  {
    let index = <FormArray>this.allocationForm.controls['allocationsArray'];
    var carList = Array.from(new Set(this.productsDTO.filter(x => x.productType === e.value).sort().values()));
    this.subModels = Array<Productdropdown>();
    carList.forEach(productLists => {
      const tempItem = new Productdropdown();
      tempItem.displayValue = productLists["carDescription"]
      tempItem.itemValue = productLists["carCode"]
      this.subModels.push(tempItem);
    });
  }

How do I filter the second control values not to change the already selected values in the first row of the allocationsArray in my code. using angular 7x

the onAddCars() is something like this..

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

Can you please let me know what I should do so that each row of the formArray does not change the values of the already selected values in the other rows? any help is appreciated. Please note: Adding controls dynamically and getting the values correctly in the filters work. Its only when I change it, it goes and changes the other dropdowns as well. Thank you.

Eliseo Eliseo · Accepted Answer · 2020-04-15T10:09:39

you only has an unique variable "subModels" that use in all your form, so, you can do in this way.

One aproach is that subModels was an array or arrays

//declare subModels as array of any
subModels:any[]=[]
public filterCarModel(e:any,ind:any)
  {
    let index = <FormArray>this.allocationForm.controls['allocationsArray'];
    var carList = Array.from(new Set(this.productsDTO.filter(x => x.productType === e.value).sort().values()));

    //here declare this.subModels[ind] as an array
    this.subModels[ind] = Array<Productdropdown>();

    carList.forEach(productLists => {
      const tempItem = new Productdropdown();
      tempItem.displayValue = productLists["carDescription"]
      tempItem.itemValue = productLists["carCode"]

      //you push the element in this.subModels[ind]
      this.subModels[ind].push(tempItem);
    });
  }

Another aproach is that your productList was and array with children. Imagine you has some like

modelList=[{
      id:1,
      model:'Audi',
      submodels:[{id:10,name:'A3'},{id:11,name:'Quatro'}]
      },
      {
      id:2,
      model:'Seat',
      submodels:[{id:20,name:'Ibiza'},{id:21,name:'Panda'},{id:22,name:'Leon'}]
      },
  ]

I imagine a formArray with model and submodel, so we make two functions

getLine(data:any)
  {
    data=data || {model:'',submodel:''}
    return new FormGroup({
      model:new FormControl(data.model),
      submodel:new FormControl(data.model)
    })

  }
  addLine()
  {
    this.formArray.push(this.getLine(null))
  }

I am going to use an auxiliar variable and a [ngModel] in the form. See that the variable don't belong to the formArray, I use as auxiliar and use (ngModelChange) to give value to formArray.get('model')

My variable

model:any[]=[]

And the .html

<button mat-button (click)="addLine()">Add</button>
<form [formGroup]="formArray">
    <div *ngFor="let group of formArray.controls;let i=index" [formGroup]="group">
        <mat-form-field>
            <mat-label>Model</mat-label>
            <!-- the ngModel is model[i] -->
            <mat-select [ngModel]="model[i]"
             <!--in ngModelChange we equal model[i] to event
                 and give value to group.get('model')-->
             (ngModelChange)="model[i]=$event;group.get('model').setValue($event.id)"
             <!--I need indicate that the ngModel is NOT belong to the form-->
             [ngModelOptions]="{standalone:true}"
             >
               <!--see that value is the "modelo", ALL the object-->
                <mat-option *ngFor="let modelo of modelList" [value]="modelo">
                    {{modelo.model}}
                </mat-option>
            </mat-select>
        </mat-form-field>
        <mat-form-field>
            <mat-label>SubModel</mat-label>
            <!--this select use formControlName as ussuall-->
            <mat-select formControlName="submodel">
                <!--here I can use model[i].submodels-->
                <mat-option *ngFor="let submodelo of model[i]?.submodels" [value]="submodelo.id">
                    {{submodelo.name}}
                </mat-option>
            </mat-select>
        </mat-form-field>

    </div>
</form>

You can see in stackblitz

How to dynamically add filtered values for Mat-Select dropdown

2 Answers