Winkel-2 Reaktiven Formen: update select-Liste auf-value-änderungen

Habe ich eine Eckige 2-form gebaut mit ReactiveForms. Die form enthält 2 Elemente auszuwählen. Die erste enthält eine Liste von Automarken. Wenn ein make aus der Liste ausgewählt wird, wird die zweite select-element sollte zeigen die Modelle gehören, machen.

Ich habe das Spiel mit valueChanges, aber ich kann nicht scheinen, um die zweite(Kind) select-element enthalten die Modelle für die ausgewählten stellen. Wenn beide Felder sind nur einfache input-Elemente, die Reaktion auf valueChanges wird tatsächlich ein update des Modells input-element (mithilfe der SetzenWert auf das Modell FormControl). Siehe unten code-Beispiel für einfache Eingabefelder.

Ist es auch möglich, dies zu erreichen mit Reaktiven Formen?

this.vehicleForm.controls['make'].valueChanges.subscribe((value) => {
  console.log(value);
  this.vehicleForm.controls['model'].setValue('Some Value');
});

In diesem Fall wird der 'Wert' ist in der Tat das ausgewählte Objekt.

Was ist deine Frage ?
Wir brauchen mehr Informationen über Ihre problem. Plunker wäre toll
Die Frage ist: wie Stelle ich die Modelle der select-element enthalten die Modelle für die ausgewählten machen?
Überprüfen Sie heraus meine aktualisierte Antwort.

InformationsquelleAutor Supercell | 2016-12-20

  1. 9

    Können Sie variable speichern Modelle Sie benötigen für die Anzeige in es und verwenden Sie dann NgFor Richtlinie die Anzeige in der select-Liste:

    <select class="form-control" formControlName="models">
    <option *ngFor="let m of models" [value]="m">{{m}}</option>
</select>

    Und in der Komponente:

    this.vehicleForm.controls['make'].valueChanges.subscribe((value) => {
  console.log(value);
  this.models = ... //here you add models to variable models based on selected make
});

    Diese Weise, jedes mal, wenn models Variablen verändert, werden diese änderungen spiegeln sich in Ihrer dropdown-Liste.

    Es gibt keinen Unterschied in diesem code , erhalten Sie nicht die gleiche Sache
    Danke!!! Das hat geklappt. Schade, ich konnte nicht einen Plunkr sich in der Zeit, aber in meinem eigenen code, es funktioniert.
    Wie Sie sehen können, dass @stefan gab eine schnelle Antwort auf Ihre Fragen und lösen Ihr Problem so ist, sollten Sie upvote seine Antwort.

    InformationsquelleAutor Stefan Svrkota

  2. 0

    Als eine einfache Erweiterung von dem, was vorher gesagt wurde, den Hörer über das Formular in der Komponente gehen muss irgendwo bei der Initialisierung:

    onInit(){
  //Fill in makes nd intialize the form
  onChange()
}

onChange(): void {
  this.vehicleForm.controls['make'].valueChanges.subscribe((value) => {
    console.log(value);
    this.models = ... //here you add models to variable models based on selected make
  });
}

    Dies ist auch ein gutes Beispiel für die Verwendung von Reaktiven Modell Form: https://codecraft.tv/courses/angular/forms/reactive-model-form/

    InformationsquelleAutor EloyRoura

Schreibe einen Kommentar