Двухстороннее связывание данных в выбранном компоненте с использованием реактивной формы

Question

Я использую компонент select для отображения некоторых countries и связанных с ними states и languages следующим образом:

Здесь мне нужно выполнить двустороннюю привязку данных, я хочу изменить раскрывающийся список states и languages в соответствии с выбором, сделанным в Country.

Я знаю, что это дубликат этого QUESTION , здесь они используют шаблонно-управляемые формы , но я хочу выполнить это для реактивных форм .

Stackcblitz DEMO

Answer 1

попробуйте:

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>