How to bind cascading drop down in table using Angular 4 typescript?

Question

According to my plunker (look plunker at below commnet box) whenever i change country from first row then bind accordingly next whole column's state dropdown insted of first one.i want to bind state dropdown accordingly country dropdown but in only same row.Any help will be highly appreciated.

plnkr.co/edit/BkDk9wLB3J5Uv2ijEX6i?p=preview : Look at this plunker — LGB
– LGB, Commented Jul 31, 2017 at 11:48
Please include the plunker in the question itself, and accompany it with the relevant code extracts. Otherwise if the plunker gets fixed, this question will be useless for any future users — Christopher Moore
– Christopher Moore, Commented Jul 31, 2017 at 13:10

Nehal · Accepted Answer · 2017-07-31 15:11:22Z

The problem in you code is you are not differentiating each state dropdown. You are using the same states for all three, so when you are changing state list for one country, you are resetting the other two also.

I tweaked the code little to use the number index, that way each state dropdown maintains its own list and can be set separately without effecting other ones.

component.ts:

export class CountryListComponent implements OnInit {

  initState = new State(0, 0, 'Select');
  selectedCountry:Country[] = []; 
  countries: Country[];
  states: State[] = [];

  allStates: State[] = [];

  constructor(private _dataService: DataService) {
    this.selectedCountry = [new Country(0, 'India', this.initState),new Country(0, 'India', this.initState),new Country(0, 'India', this.initState)]; 
    this.numbers = Array(3).fill().map((x,i)=>i);
    this.countries = this._dataService.getCountries();
    this.states = [[], [], []]
  }

  ngOnInit(){
    this.allStates = this._dataService.getStates();
  }

  onSelect(countryid,index) {
    console.log(countryid, index)
    this.states[index] = this.allStates.filter((item)=> item.countryid == countryid));
    console.log(this.states);
  }

  onStateSelect(stateid, index){
    console.log(stateid, index);
    this.selectedCountry[index].state = this.allStates.filter((item)=> item.id == stateid));
    console.log(this.selectedCountry[index].state);
  }
}

html:

<table>
  <tr *ngFor="#number of numbers">
    <td>
      <label>Country:</label>
      <select [(ngModel)]="selectedCountry[number].id" (change)="onSelect($event.target.value, number)">
        <option value="0">--Select--</option>
        <option *ngFor="#country of countries" value={{country.id}}>{{country.name}}</option>
      </select>
    </td>
    <td>
      <div>
        <label>State:</label>
        <select [(ngModel)]="selectedCountry[number].state.id" (change)="onStateSelect($event.target.value, number)">
          <option *ngIf='selectedCountry[number].state.id == 0' value="0">--Select--</option>
          <option *ngFor="#state of states[number]" value={{state.id}}>{{state.name}}</option>
        </select>
      </div>
    </td>
  </tr>
</table>

Plunker demo

@Nehal : it's accespted...also can you please know me how to apply validation on this type of binding.Thanks.

Dan C · Accepted Answer · 2017-08-24 16:54:01Z

1

Create a directive for the cascading country and states drop down. By using directive, the formmodule template validation works out of the box in Angular 4.

I have extended the plunker sample from Nehal using directives. The plunker example I provided does not have validation implemented.

Plunker example

answered Aug 24, 2017 at 16:54

Dan C

312 bronze badges

Collectives™ on Stack Overflow

How to bind cascading drop down in table using Angular 4 typescript?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related