Angular 2动态表单:如何创建依赖下拉列表 [英] Angular 2 Dynamic Forms: How to create dependent dropdown

问题描述

我正在通过引用 Angular 2动态表单创建动态表单

一切正常.但是我面临的问题是创建依赖下拉列表.例如:我想创建一个表格，用户可以使用Country，City，State下拉列表选择地址.

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
})

以下是模板.

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

我想要的是，当用户选择Country时，应该填充State的列表，当用户选择State时，应该填充City的列表，但是全部使用动态表单.

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.

推荐答案

下面是一个Plunkr，它演示了相关的下拉列表: https://plnkr.co/edit/b5FKSp06XMfQul5pYQti?p=preview

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.

Plunkr显示了两种为依赖下拉列表生成值的技术:

The Plunkr shows two techniques to generate the values for the dependent drop-down:

• 重新计算第一个下拉列表发出的每个change事件的值.
• 将自定义管道应用于从属下拉列表的值，以便将它们自动绑定到&根据第一个下拉菜单的值进行过滤.

• 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动态表单:如何创建依赖下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！