Angular 2 Dynamische Formulare: Wie abhängig Dropdown-Liste erstellen

Question

ich dynamische Form bin die Schaffung von zu beziehen Angular 2 Dynamic Forms

Alles funktioniert gut. aber das Problem, dem ich gegenüberstehe, ist die Schaffung eines abhängigen Drop-downs. zB: Ich möchte ein Formular erstellen, in dem der Benutzer seine Adresse unter Verwendung der Dropdown-Liste Country, City, State auswählen kann.

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

Edit: Folgendes ist die Vorlage.

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

Was ich will, ist, wenn der Benutzer Country wählen, Liste der State bevölkert bekommen sollte und wenn der Benutzer wählen State, Liste der City sollten aber alle mit Dynamic Forms bevölkert bekommen.

Answer 1

Hier ist eine Plunkr, die abhängig Drop-downs zeigt: https://plnkr.co/edit/b5FKSp06XMfQul5pYQti?p=preview

Es hat eine erste Dropdown-Liste einen Produktart (klein oder groß), die eine zweite Dropdown-Liste aktualisiert auszuwählen zeigt nur die kleinen oder die großen Produkte. Sie können dieses Beispiel leicht in abhängige Dropdown-Listen für Land/Bundesland/Stadt übersetzen.

Die Plunkr zeigt zwei Techniken, um die Werte für die abhängige Dropdown-generieren:

• Neuberechnen der Werte auf jedem Ereignis change emittiert durch die erste Drop-down.
• Anwenden einer benutzerdefinierten Pipe auf die Werte der abhängigen Dropdown-Liste, sodass sie automatisch an & gebunden sind, gefiltert nach dem Wert der ersten Dropdown-Liste.