Angular 2 Dynamic Forms：如何创建依赖下拉菜单

Question

我通过参考Angular 2 Dynamic Forms

创建动态表单一切正常。但我面临的问题是创建依赖下拉菜单。例如：我想创建一个表单，用户可以使用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事件的值。
• 将自定义管道应用于相关下拉列表的值，以便它们自动绑定到&，并按第一个下拉列表的值进行过滤。