Question

创建动态表单

一切都很好。但我面临的问题是创建依赖下拉。例如：我想创建表单，用户可以使用Country，City，State下拉菜单选择地址。

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列表但所有使用动态形式。

Answer 1

这是一个演示依赖下拉的Plunkr：https://plnkr.co/edit/b5FKSp06XMfQul5pYQti?p=preview

它有一个第一个下拉列表，用于选择产品类型（小型或大型），更新第二个下拉列表，仅显示小型或大型产品。您可以轻松地将此示例转换为国家/州/城市的相关下拉列表。

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

重新计算第一个下拉列表发出的每个change事件上的值。
将自定义管道应用于相关下拉列表的值，以便它们自动绑定到＆amp;按第一个下拉列表的值过滤。

Answer 2

使用Angular的低版本，您可以在反应形式上简单地使用valuechanges方法并订阅更改：

this.myyForm.controls['productCategory'].valueChanges.subscribe(change => {
  console.log(change);

  if (change === 'THIS') {
    this.myOtherControls = ['Enabled']
  } else {
    this.myOtherControls = ['Enabled', 'Disabled']
  }
});

Angular 2 Dynamic Forms：如何创建依赖下拉列表

2 个答案: