Formular-Steuerelement-valueChanges gibt den vorherigen Wert

Ich habe ein Formular-Steuerelement mit dem Namen 'question1' innerhalb des form-Objekts parentForm und ich abonniert haben, um es in der folgenden Weise.

Seine radio-button mit zwei Optionen Yes und No, wenn ich wählen Sie No bekomme ich Yes und wenn ich wählen Sie Yes seine eine No.

this.parentForm.controls['question1'].valueChanges.subscribe(
  (selectedValue) => {
    //If option `No is selected`
    console.log(selectedValue);  //displays No. OK
    console.log(this.parentForm.value['question1']);  //displays Yes. Problem is here
  }
);

selectedValue variable hat den richtigen Wert, aber wenn ich console.log(this.parentForm.value['question1'] es gibt den vorherigen Wert.

Habe ich ein setTimeout() vor Abruf der Wert von this.parentForm.value['question1'] - Es funktioniert einfach gut.

setTimeout(() => {
  console.log(this.parentForm.value['question1']); //gives the correct value.
}, 500);

Aber meine Frage ist, warum parentForm wird nicht aktualisiert, wenn seine Kontroll-Wert-änderungen und auch ich bin beim abrufen seinen Wert erst, nachdem der Wert geändert wurde.

Hinweis: ich will nicht zu beobachten parentForm.valueChanges, nicht meine Anforderung.

Also, was Sie daran hindert, mit selectedValue?
Mit this.parentForm.value['question1'] ich auf Sie zugreifen kann überall innerhalb der Komponente. selectedValue hat nur einen lokalen Gültigkeitsbereich.

InformationsquelleAutor Amit Chigadani | 2017-07-04

23

Den valueChanges - Ereignis wird ausgelöst, nach der neue Wert wird aktualisiert, um die FormControl Wert, und vor die änderung wird gequasselt bis zu seiner Eltern und Vorfahren. Somit haben Sie Zugriff auf den Wert der FormControl selbst (die wurde gerade gepatcht), nicht ein Feld der FormGroup Wert-Objekt (das ist so unberührt, dass während der Veranstaltung).

In Licht, verwenden Sie this.parentForm.get('question1').value statt:
```
this.parentForm.controls['question1'].valueChanges.subscribe(
    (selectedValue) => {
      console.log(selectedValue);
      console.log(this.parentForm.get('question1').value);     
    }
);
```
Danke! Dies funktioniert perfekt. Keine Ahnung warum die andere Methode nicht funktioniert?
Ich aktualisiert meine Antwort zu setzen, einige der Erklärung, werfen Sie bitte einen Blick.
Die Funktionalität, die hier beschrieben wird gekennzeichnet als ein bug: github.com/angular/angular/issues/13129
RxJS Betreiber kann für die Verwaltung der Abonnements Ergebnis und extrahieren prev und next, ohne mit dem Formular-Steuerelement-Wert: stackoverflow.com/a/54205373/1148107

InformationsquelleAutor Harry Ninh

valueChanges ist eine Observable, so können Sie Rohr pairwise um die nächsten und vorherigen Werte im Abonnement.

//No initial value. Will emit only after second character entered
this.form.get('fieldName')
  .valueChanges
  .pipe(pairwise())
  .subscribe(([prev, next]: [any, any]) => ... );

//Fill buffer with initial value, and it will emit immediately on value change
this.form.get('fieldName')
  .valueChanges
  .pipe(startWith(null), pairwise())
  .subscribe(([prev, next]: [any, any]) => ... );

Beispiel, dass es funktioniert in StackBlitz:
https://stackblitz.com/edit/angular-reactive-forms-vhtxua

paarweise sollten die Antwort sein.

InformationsquelleAutor mtpultz

4

Gibt es eine weitere option, aber es konnte nicht in allen Fällen als geeignet: Sie können warten, einen tick vor der selectedValue aktualisiert in FormControl:
```
setTimeout( () => console.log( selectedValue ) );
```
Mehr auf die sync/async-Formen Thema: Reaktive Formen in Winkel-Guide docs.

InformationsquelleAutor nesinervink
1

Versuchen, dies zu tun
```
this.parentForm.controls['question1'].valueChanges.subscribe(
    (selectedValue) => {
      console.log(selectedValue);
      console.log(this.parentForm.value.question1);     
    }
);
```
wenn Kontrollen von FormBuilder aktualisiert wurde, können Sie sofort wieder die letzten Werte vom FormBuilder-Objekt über die Eigenschaft Wert

InformationsquelleAutor Miguel Angel Leyva Guadalupe

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.