CODEWITHSUNDEEP
angularangular-reactive-forms
Oscar Mauricio Benavidez Suare
Oscar Mauricio Benavidez Suare

Reputation: 43

Update options in mat-select dynamic reactive forms

I want to know how I can update the options inside a mat-select created dynamically, with dynamic forms in Angular 7. It has the following structure:

<span *ngIf="item !== undefined">
  <div [formGroup]="form">
    <div [ngSwitch]="item.controlType" class="col s12 m12 l4">
      <mat-form-field *ngSwitchCase="'textbox'" class="example-full-width">
        <input matInput [placeholder]="item.label" [formControlName]="item.key" [id]="item.key" [type]="item.type">
      </mat-form-field>
      <mat-form-field *ngSwitchCase="'dropdown'">
        <mat-select [formControlName]="item.key" [placeholder]="item.label" *ngIf="item.callback==1"
          (selectionChange)="cargaDropDown(item.origenCallBack, item.key);">
          <mat-option *ngFor="let opt of item.options" [value]="opt.key">
            {{opt.value}}
          </mat-option>
        </mat-select>
        <mat-select [formControlName]="item.key" [placeholder]="item.label" *ngIf="item.callback==0">
          <mat-option *ngFor="let opt of item.options" [value]="opt.key">
            {{opt.value}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <div class="errorMessage" *ngIf="!isValid">{{item.label}} is required</div>
  </div>
</span>

I have a kind of mat-select who have callback and should populate depending on the selection of the user some other mat-select, I only know the form control name of the mat-select who I want to update the options, I need to know how to achieve this, I already receive the data when executing cargaDropDown method, thanks for your help.

UPDATE:

I followed the tutorial in the angular page:

https://angular.io/guide/dynamic-form

and I created dynamically the form and I have two kinds of select one who is the parent and another who is the children, I tried to implement your answer, just to assign the value of the new data to the item:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'myfilter',
    pure: false
})
export class MyFilterPipe implements PipeTransform {
    transform(items: any[], selectedCargaId: number): any {
        if (!items || !selectedCargaId) {
            return items;
        }
        // filter items array, items which match and return true will be
        // kept, false will be filtered out
        return items.filter(item => item.options.cargaId === selectedCargaId);
    }
}

but the value of selectedCargaId is always null, never updates.

I need to assign the data that I retrieve from the server when selecting the option in the father, into the child, I want it working with mat-select.

Thank's again with any help.

Upvotes: 1

Views: 3598

Answers (1)

Bharat Raj Saya
Bharat Raj Saya

Reputation: 39

I'm assuming you have an array of objects from which you need to shortlist and display in the second mat-select options based on the first one's selection.

For this you could filter the options with a pipe as already answered here.

So, something like this in your template

<mat-option *ngFor="let opt of item.options | myfilter:cargaId" [value]="opt.key">

Where cargaId is the selected id of the first mat-select.

And in your pipe, filter the item.options like so

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'myfilter',
    pure: false
})
export class MyFilterPipe implements PipeTransform {
    transform(items: any[], selectedCargaId: number): any {
        if (!items || !selectedCargaId) {
            return items;
        }
        // filter items array, items which match and return true will be
        // kept, false will be filtered out
        return items.filter(item => item.options.cargaId === selectedCargaId);
    }
}

Hope this helps! Cheers!

Upvotes: 0

Related Questions