How to set individual option list for selects in a formbuilder

问题

I have a model driven form with 2 selects, 'State' and 'City'. The models looks something as below :

class State{
stateID : number;
stateName : String,
cities : City[]
}
class City{
cityID : number,
cityName : String
}

I am populating the city option list from the selection of state as I have all the data available in State[] 'stateList'.

    <select formControlName="state" (onchange)="getCityNameByState($event.target.value)">
                <option *ngFor="let stateName of stateList" [value]= "stateID">
                  {{stateName}}</option>

select formControlName="city">
                  <option *ngFor="let cityName of cityList" [value]= "cityID">
              {{cityName}}</option>

The issue here is the cityList gets formed by the selection of state which is ok for 1 set of state & city selects. But since I have a dynamic FormBuilder here, there can be multiple sets of State & City selects. And with every selection of State, the cityList is changed for all instead of getting populated for its corresponding State in the FormGroup. I am thinking of dynamically generating a separate cityList for every State select individually but not sure if this is the appropriate solution. Can someone please help here.

回答1:

if you need different list, you need different variables. You can do it creating an array of arrays of cities, or creating an object that has an array of cities. An example.

You must create

cities:string[][]=[
   [{name:"Alabama"},{name:"Boston"}...],
   [{name:"Madrid"},{name:"Barcelona"}..]
   ....
]
//Or
cities:any={
  USA:[{name:"Alabama"},{name:"Boston"}...],
  Spain:[{name:"Madrid"},{name:"Barcelona"}..]
}

then the loop you do is over

<div *ngFor="let city of cities[index]"> 
 or 
 <div *ngFor="let city of cities[dataForm.get('country').value]>

Update

@RandomGuy, you have three different things: your form, your data that feed the form and the data of States. The data of states the data you use to create the options.

At first this data will be like

dataStates=[
   {stateID:"AL",name="Alaska",cities:[]},
   {stateID="CL",name="California",cities:[]}
   ...all the rest of states...
]

<select formControlName="stateID" (onchange)="getCities($event.target.value)">
    <options *ngFor="let item of dataStates" [value]="item.statedID">
       {{item.name}}
    </option>
 </select>
<select formControlName="cityID" >
  <!-the options will be dataStates.find(d=>d.stateId==myArray.get('statedID').value)-->
    <options *ngFor="let city of dataStates.find(d=>d.stateId==myArray.get('statedID').value).cities" [value]="city.cityID">{{city.name}}
       {{city.name}}
    </option>
 </select>

The function getCities

//get cities check if cities of the data exist. If not fill the cities
getCities(stateID:string)
{
   let index=this.dataStates.findIndex(p=>p.stateID==stateID)
   if (index>=0){ //Always must be index>0
       if (this.dataStates.cities.length<=0)  //is not fill yet
       {
           this.httpClient.get(url+"/"+stateID).subscribe(res=>{
                 this.dataStates[index].cities=res;
           })
       }
}

In this way you only search the cities of the states that are in the form (not all the cities)

来源：https://stackoverflow.com/questions/52574582/how-to-set-individual-option-list-for-selects-in-a-formbuilder

标签

angular

angular-reactive-forms

angular-formbuilder