Angular 2 Dynamic Forms:如何创建依赖下拉列表 [英] Angular 2 Dynamic Forms: How to create dependent dropdown
问题描述
一切正常.但我面临的问题是创建依赖下拉列表.例如:我想创建一个表单,用户可以在其中使用 Country
、City
、State
下拉菜单选择地址.
new DropdownField({键:'国家',标签:'国家',选项: [{键:'美国',值:'美国'},{键:'英国',价值:'英国'}],订单:4}),新的下拉字段({键:'状态',标签:'状态',选项: [{key: 'taxas', value: 'taxas'},{键:'底特律',值:'底特律'}],订单:5}),新的下拉字段({键:'城市',标签:'城市',选项: [{键:'休斯顿',值:'休斯顿'},{键:'奥斯汀',值:'奥斯汀'}],订单:5})
以下是模板.
<label [attr.for]="field.key" class="control-label">{{field.label}}</label><div [ngSwitch]="field.controlType"><input *ngSwitchCase="'文本框'"formControlName="{{field.key}}"[id]="field.key"[type]="field.type"类=形式控制"[占位符]="field.placeholder"[只读]="field.readonly"><select [id]="field.key" *ngSwitchCase="'dropdown'" formControlName="{{field.key}}" class="form-control"><option style="display:none" value="">选择一个选项</option><option *ngFor="let opt of field.options" [value]="opt.key">{{opt.value}}</option></选择><div style="颜色:红色;"*ngIf="!isValid">({{field.label}} 为必填项)
我想要的是当用户选择 Country
时,State
列表应该被填充,当用户选择 State
时, 列表City
应该被填充,但都使用动态表单.
这是一个 Plunkr,它演示了依赖下拉列表:https://plnkr.co/edit/b5FKSp06XMfQul5pYQti?p=preview
它有一个用于选择产品类型(小型或大型)的第一个下拉列表,它更新第二个下拉列表,仅显示小型或大型产品.您可以轻松地将此示例转换为国家/州/城市的相关下拉列表.
Plunkr 展示了两种生成相关下拉列表值的技术:
- 重新计算第一个下拉列表发出的每个
change
事件 的值. - 将自定义管道应用于相关下拉列表的值,以便它们自动绑定到 &按第一个下拉列表的值过滤.
I am creating dynamic form by referring to Angular 2 Dynamic Forms
Everything works good. but the problem I am facing is creating dependent drop-down. eg: I want to create form where user can select there address using Country
, City
, State
drop-down.
new DropdownField({
key: 'country',
label: 'Country',
options: [
{key: 'usa', value: 'USA'},
{key: 'uk', value: 'UK'}
],
order: 4
}),
new DropdownField({
key: 'state',
label: 'State',
options: [
{key: 'taxas', value: 'taxas'},
{key: 'detroit', value: 'detroit'}
],
order: 5
}),
new DropdownField({
key: 'city',
label: 'City',
options: [
{key: 'houston', value: 'Houston'},
{key: 'austin', value: 'Austin'}
],
order: 5
})
Edit: Following is the template.
<div class="form-group" [formGroup]="form">
<label [attr.for]="field.key" class="control-label">{{field.label}}</label>
<div [ngSwitch]="field.controlType">
<input *ngSwitchCase="'textbox'"
formControlName="{{field.key}}"
[id]="field.key"
[type]="field.type"
class="form-control"
[placeholder]="field.placeholder"
[readonly]="field.readonly"
>
<select [id]="field.key" *ngSwitchCase="'dropdown'" formControlName="{{field.key}}" class="form-control">
<option style="display:none" value="">Choose an option</option>
<option *ngFor="let opt of field.options" [value]="opt.key">{{opt.value}}</option>
</select>
</div>
<div style="color: red;" *ngIf="!isValid">({{field.label}} is required)</div>
</div>
What I want is when user select Country
, list of State
should get populated and when user select State
, list of City
should get populated but all using Dynamic Forms.
Here's a Plunkr which demonstrates dependent drop-downs: https://plnkr.co/edit/b5FKSp06XMfQul5pYQti?p=preview
It has a first drop-down list to select a product type (small or large) which updates a second drop-down list showing only the small or the large products. You could easily translate this example to dependent drop-downs for country/state/city.
The Plunkr shows two techniques to generate the values for the dependent drop-down:
- Recalculating the values on every
change
event emitted by the first drop-down. - Applying a custom pipe to the values of the dependent drop-down so that they are automatically bound to & filtered by the value of the first drop-down.
这篇关于Angular 2 Dynamic Forms:如何创建依赖下拉列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!