Update options in mat-select dynamic reactive forms

Question

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.

score 0 · Answer 1 · answered Feb 09 '19 at 04:37

0

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!

answered Feb 09 '19 at 04:37

Bharat Raj Saya

9
2

Hello, thank's for your answer, i don't have an array of objects at the beginning, when i choose some option in the first select i pass the cargaId to a service who returns an array of objects with the data for the second select, then i need to replace any data in the second select with the new data, but that update is for this select instance, because it could be that i create another selects with the same logic, because they are dynamic. – Oscar Mauricio Benavidez Suare Feb 09 '19 at 15:03
So, if you are getting a new set of data when cargeId changes, you can assign the newly returned array to the second mat select right? I'm not seeing what's the difficulty here. You probably just need another array dedicated to the second mat-select which gets updated by that other service. – Bharat Raj Saya Feb 09 '19 at 15:18
I don't know how to set the newly returned array to the second select i tried with your answer with the pipe, assining the value of the new array to the empty array, but returns error. – Oscar Mauricio Benavidez Suare Feb 09 '19 at 17:39
It's difficult to help without seeing what you tried, your code and the error. Need more details and specifics please. – Bharat Raj Saya Feb 09 '19 at 19:49

Update options in mat-select dynamic reactive forms

1 Answers1