Winkel-2 Dynamische Formulare: erstellen von abhängigen dropdown

Erstelle ich dynamische form, durch die Bezugnahme auf Winkel-2 Dynamische Formulare

Alles funktioniert gut. aber das problem, das ich bin vor ist die Schaffung abhängige drop-down. zB: ich möchte ein Formular erstellen, wo Benutzer kann wählen Sie dort die Adresse mit Country, City, State drop-down.

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: das Folgende 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 Benutzer wählen Sie Country, Liste der State bekommen sollten, aufgefüllt und als Benutzer wählen Sie State, Liste der City bekommen sollte aufgefüllt, aber alle mit Dynamischen Formen.

InformationsquelleAutor Shamsher | 2017-02-28