Tips for dynamically incorporating filtered selections into a Mat-Select dropdown

Question

Tips for dynamically incorporating filtered selections into a Mat-Select dropdown

I am seeking guidance on how to prevent changing the values of already selected values in other rows when each row of the formArray is altered. Adding controls dynamically and correctly retrieving values in filters are functioning properly. The issue arises when altering a row, causing changes in other dropdowns as well. Your assistance is greatly appreciated.

Currently, I have successfully implemented a FormArray where controls are dynamically added with the click of a button. These controls consist of two dropdowns, with the second dropdown's value dependent on the selection made in the first dropdown.

However, upon adding a new dynamic control and modifying the second dropdown's value, it also resets the value of previously selected values in the other dropdowns. The dropdowns are being rendered using material <mat-select>.

Here is a snippet of my HTML:

<!-- HTML code here -->

The method onAddCars() is responsible for adding new controls to the allocationsArray.

In my TypeScript file, the filterCarModel method is used to filter the second control values based on the selected value in the first row of the allocationsArray. Here is an example:

<!-- TypeScript code here -->

If you could provide insight into how to ensure that each row of the formArray does not alter the values of already selected values in other rows, I would greatly appreciate it. Thank you.

angular typescript angular-material angular-material2 formarray

Answer 1

Answer №1

Utilize a unique variable called "subModels" across all form elements for better organization.

One approach is to structure subModels as 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);
    });
  }

Alternatively, consider structuring your productList as an array with children models and submodels.

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'}]
      },
  ]

Create a formArray with model and submodel using 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))
  }

To enhance usability, use an auxiliary variable and [ngModel] in the form, handling values separately from formArray controls.

Define the variable:

model:any[]=[]

Update the .html file:

<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>
            <mat-select [ngModel]="model[i]"
             (ngModelChange)="model[i]=$event;group.get('model').setValue($event.id)"
             [ngModelOptions]="{standalone:true}"
             >
                <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>
            <mat-select formControlName="submodel">
                <mat-option *ngFor="let submodelo of model[i]?.submodels" [value]="submodelo.id">
                    {{submodelo.name}}
                </mat-option>
            </mat-select>
        </mat-form-field>

    </div>
</form>

For a live example, visit stackblitz

Answer 2

Utilize a unique variable called "subModels" across all form elements for better organization.

One approach is to structure subModels as 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);
    });
  }

Alternatively, consider structuring your productList as an array with children models and submodels.

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'}]
      },
  ]

Create a formArray with model and submodel using 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))
  }

To enhance usability, use an auxiliary variable and [ngModel] in the form, handling values separately from formArray controls.

Define the variable:

model:any[]=[]

Update the .html file:

<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>
            <mat-select [ngModel]="model[i]"
             (ngModelChange)="model[i]=$event;group.get('model').setValue($event.id)"
             [ngModelOptions]="{standalone:true}"
             >
                <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>
            <mat-select formControlName="submodel">
                <mat-option *ngFor="let submodelo of model[i]?.submodels" [value]="submodelo.id">
                    {{submodelo.name}}
                </mat-option>
            </mat-select>
        </mat-form-field>

    </div>
</form>

For a live example, visit stackblitz

Answer 3

Answer №2

Eliseo, your answer pointed me in the right direction and I appreciate that. Here is the updated code that reflects the changes I made:

<mat-option *ngFor="let subModel of subModels[i]" [value]="subModel.itemValue">
                      {{subModel.displayValue}}
                    </mat-option>

I also added an array for subModelsAny[][]=[]; Although I followed a different approach using FormArray instead of your suggestion, it still worked out well.

Answer 4

Eliseo, your answer pointed me in the right direction and I appreciate that. Here is the updated code that reflects the changes I made:

<mat-option *ngFor="let subModel of subModels[i]" [value]="subModel.itemValue">
                      {{subModel.displayValue}}
                    </mat-option>

I also added an array for subModelsAny[][]=[]; Although I followed a different approach using FormArray instead of your suggestion, it still worked out well.

Tips for dynamically incorporating filtered selections into a Mat-Select dropdown

Answer №1

Answer №2

Similar questions

Using `setTimeout` in a recursive function that is nested within another function

Exploring Angular 2 - examining how @input is implemented within the ngOnInit lifecycle hook for testing a component

What is the best way to simulate a service HTTP request using Jasmine in an Angular application?

Can you explain the significance of the @ symbol in TypeScript/Vue?

Encountering a NgForm provider error in Angular 4.4.6 development mode

Having trouble with RouterExtension.back() in Nativescript Angular?

implementing a directive in an Angular 2 component

Glitch causing incorrect images to appear while scrolling through FlashList

What's causing Angular to not display my CSS properly?

Utilizing References in React Components

Error in displaying dialogues upon clicking

Patience is key as you await the completion of an API call in Angular 14

Google Cloud PubSub does not automatically resend unacknowledged messages

Choose several checkboxes from the dropdown menu

What causes the error message saying 'undefined' cannot be assigned to the specified type ...?

What could be causing the Properties Array to come back as undefined?

Universal variable arguments

How can we ensure that only one of two props is specified during compilation?

Information about the HTML detail element in Angular 2 is provided

What is causing the warnings for a functional TypeScript multidimensional array?