角度2つのダイナミックフォーム：どのように依存ドロップダウン

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

それだけを示す2番目のドロップダウンリストが更新されます（小または大）製品タイプを選択するための最初のドロップダウンリストを持っています小型または大型の製品。この例を国/州/都市の従属ドロップダウンに簡単に変換することができます。

Plunkr依存ドロップダウンの値を生成するために2つの手法を示している：

• は、最初のドロップダウンによって放出されたすべてのイベントchangeの値を再計算します。
• カスタムパイプを依存ドロップダウンの値に適用すると、自動的に&にバインドされ、最初のドロップダウンの値でフィルタされます。