如何在FormBuilder中为选择设置单个选项列表 [英] 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
}

由于我在State []'stateList'中拥有所有可用数据，因此我正在从州的选择中填充城市选项列表.

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>

这里的问题是cityList是由对1组状态&城市选择.但是，由于这里有动态的FormBuilder，因此可以有多组State&城市选择.每次选择State时，都会更改cityList，而不是在FormGroup中为其对应的State填充.我正在考虑为每个选择的州动态生成一个单独的cityList，但不确定是否这是合适的解决方案.有人可以帮忙吗?

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.

推荐答案

如果需要不同的列表，则需要不同的变量.您可以执行以下操作:创建一个由城市组成的数组，或者创建一个具有多个城市组成的对象.一个例子.

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.

您必须创建

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，您有三件事:表格，提供表格的数据和州的数据.状态数据用于创建选项的数据.

@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>

函数getCities

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)

这篇关于如何在FormBuilder中为选择设置单个选项列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！