Angular 2 Dynamic Forms：如何創建依賴下拉菜單

我通過參考Angular 2 Dynamic Forms 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名單應該得到填充，但全部採用動態表單是。

來源

2017-02-28 Shamsher

這裏的'DropdownField'是...？我實際上沒有看到你在哪裏使用反應形式 – smnbbrv

你可以參考問題中提供的Angular 2 Dynamic Forms示例鏈接。 – Shamsher

我已經在那裏搜索了'DropdownField'，我什麼也沒找到。請澄清你的問題，併發布你試過的東西 – smnbbrv

這裏有一個Plunkr這表明相關的下拉菜單：https://plnkr.co/edit/b5FKSp06XMfQul5pYQti?p=preview

它有一個第一下拉列表中選擇一個產品類型（或大或小）的更新顯示第二下拉列表中只小型或大型產品。你可以很容易地將這個例子翻譯成國家/州/市的依賴下拉菜單。

的Plunkr示出了兩種技術來產生用於從屬下拉的值：

重新計算由所述第一下拉發射每change事件的值。
將自定義管道應用於相關下拉列表的值，以便它們自動綁定到&，並按第一個下拉列表的值進行過濾。

來源

2017-02-28 09:07:09 AngularChef

一個問題： 'productsAfterChangeEvent = []; productForm：ControlGroup;' ControlGroup在哪裏申報？我已經將它更改爲「FormGroup」，它工作。這是在fb.group的構造函數中返回的類型。謝謝！ –

不知道。這可能是一個錯字，它應該是'FormGroup.';） – AngularChef

Angular 2 Dynamic Forms：如何創建依賴下拉菜單

回答

相關問題