2-way data binding in select component using of the reactive form

Question

I am using select component to display some countries and their associated states and languages like this:

Here i need to perform 2-way data binding, I want to change states and languages dropdown list according to the selection made in Country.

I know this is the duplicate of this QUESTION, Here they are using template driven forms, but i want to perform it for reactive forms.

Stackcblitz DEMO

can you update with some code so that it will help in better understanding? like your JSON for those dropdown — Abhishek Ekaanth
– Abhishek Ekaanth, Commented Nov 19, 2018 at 6:14

Nick Wang · Accepted Answer · 2018-11-19 06:33:02Z

1

try it:

import {Component} from '@angular/core';

export interface Country {
  value: string;
  viewValue: string;
}
export interface State {
  country: string;
  value: string;
  viewValue: string;
}
export interface Language {
  state: string;
  value: string;
  viewValue: string;
}
/**
 * @title Basic select
 */
@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
  public selCountry;
  public selState;
  countries: Country[] = [
    {value: 'IND', viewValue: 'India'},
    {value: 'AUS', viewValue: 'Austarlia'},
    {value: 'ENG', viewValue: 'England'}
  ];

   states: State[] = [
    {country: 'IND', value: 'KAR', viewValue: 'Karnataka'},
    {country: 'IND', value: 'TEL', viewValue: 'Telangana'},
    {country: 'AUS', value: 'KL', viewValue: 'Kerala'}
  ];
    languages: Language[] = [
    {state: 'KL', value: 'KN', viewValue: 'Kannada'},
    {state: 'KAR', value: 'TL', viewValue: 'Telugu'},
    {state: 'TEL', value: 'ML', viewValue: 'Malayalam'}
  ];
  getStates() {
    return this.states.filter(item => {
return item.country == this.selCountry;
    });
  }
  getLanguages() {
    return this.languages.filter(item => {
return item.state == this.selState;
    });
  }
}


<mat-form-field>
  <mat-select placeholder="Country" [(ngModel)]="selCountry">
    <mat-option *ngFor="let country of countries" [value]="country.value">
      {{country.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field>
  <mat-select placeholder="States" [(ngModel)]="selState">
    <mat-option *ngFor="let state of getStates()" [value]="state.value">
      {{state.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field>
  <mat-select placeholder="Language">
    <mat-option *ngFor="let language of getLanguages()" [value]="language.value">
      {{language.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

answered Nov 19, 2018 at 6:33

Nick Wang

6243 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

PGH Over a year ago

Thanks for the answer. Now i am able to see the states and languages from the list according to the selected country.but i want that states and language to be displayed instead of selecting from the list.

Nick Wang Over a year ago

@PrashanthGH oh, may you can try add (change) event.like <country (change)="onCountryChange()"> and onCountryChange(){let states=this.getStates();if (states.length) this.selState=states[0].value;this.onStateChange();} the onStateChange function same as country.

Collectives™ on Stack Overflow

2-way data binding in select component using of the reactive form

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related