Как установить индивидуальный список опций для селекторов в formbuilder - PullRequest
Новая
       24

Как установить индивидуальный список опций для селекторов в formbuilder

0 голосов
/ 30 сентября 2018

У меня есть управляемая моделью форма с двумя вариантами выбора: «Штат» и «Город».Модели выглядят примерно так: 

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

Я заполняю список опций города из выбора штата, так как у меня есть все данные, доступные в 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>

Проблема здесь в том, что cityList формируется выбором штата, который подходит для 1 набора штатов и выбора города.Но так как у меня есть динамический FormBuilder здесь, может быть несколько наборов выбора штата и города.И с каждым выбором State, cityList изменяется для всех вместо того, чтобы заполняться для его соответствующего State в FormGroup.Я думаю о динамическом создании отдельного списка городов для каждого штата, выбранного индивидуально, но не уверен, что это подходящее решение.Может кто-нибудь, пожалуйста, помогите здесь.

1 Ответ

0 голосов
/ 30 сентября 2018

если вам нужен другой список, вам нужны разные переменные.Вы можете сделать это, создав массив массивов городов или создав объект с массивом городов.Пример.

Вы должны создать 

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

, тогда цикл, который вы делаете, закончится 

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

Обновление

@RandomGuy, у вас есть три разные вещи: ваша форма, ваши данные, которые заполняют форму, и данные о Штатах.Данные состояний указывают данные, которые вы используете для создания опций.

Сначала эти данные будут похожи на 

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>

Функция 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;
           })
       }
}

Таким образом, вы будете искать только города штатов в форме(не все города)

...