0
277
VistasChange dropdown based on another dropdown in Angular 11?
I want to change dropdown based on another dropdown.
ts.file
Countries: Array<any> = [
{ name: '1st of the month', states: [ {name: '16th of the month'} ] },
{ name: '2nd of the month', states: [ {name: '17th of the month'} ] },
{ name: '3rd of the month', states: [ {name: '18th of the month'} ] },
]
states: Array<any> = [];
cities: Array<any> = [];
changeCountry(country: any) {
this.states = this.Countries.find(cntry => cntry.name == country.target.value).states;
}
html.file
<mat-form-field>
<mat-select [(ngModel)]="custFirst" name="custFirst" placeholder="Country" (change)="changeCountry($event)">
<mat-option *ngFor="let country of Countries" [value]="country.name" > {{ country.name }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="State">
<mat-option *ngFor="let state of states" [value]="state.name">{{ state.name }}
</mat-option>
</mat-select>
</mat-form-field>
Now my problem is that, I unable to get the value in second dropdown. Please help me why trigger part is not working.
·
Santiago Trujillo
2 Respuestas
Responde la pregunta0
The change event should be changed to selectionChange. If you want the state to be auto-selected add [(ngModel)] to the state dropdown and update it when the country is changed:
changeCountry(country: any) {
this.states = this.Countries.find(
(cntry) => cntry.name == country.value
).states;
this.sFirst = this.states[0].name;
}
<mat-form-field>
<mat-select [(ngModel)]="custFirst" name="custFirst" placeholder="Country" (selectionChange)="changeCountry($event)">
<mat-option *ngFor="let country of Countries" [value]="country.name" > {{ country.name }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="State" [(ngModel)]="stateFirst">
<mat-option *ngFor="let state of states" [value]="state.name">{{ state.name }}
</mat-option>
</mat-select>
</mat-form-field>
Working example: https://stackblitz.com/edit/angular-6-stackoverflow-nzvqse?file=src/app/components/stackoverflow-solution/stackoverflow-solution.component.ts
·
Santiago Trujillo
Denunciar
0
You can handle that with a switch case statements, pass the value of country to the function getStates
country:string = 'Uruguay';
states:string[];
getStates(country: string){
switch(country) {
case '':
this.states = [];
break;
case 'República Dominicana':
this.states = ['', 'Azua', 'Baoruco', 'Barahona', 'Valverde'];
break;
case 'Uruguay':
this.states = ['', 'Artigas', 'Canelones', 'Tacuarembó'];
break;
case 'Venezuela':
this.states = ['', 'Amazonas', 'Apure', 'Yaracuy'];
break;
}
}
this.getCountryData(this.country);then in view:
<mat-option *ngFor="let state of states" [value]="state.name">{{ state.name }}
·
Santiago Trujillo
Denunciar
Responde la pregunta