Contrôle de formulaire valueChanges donne la valeur précédente

J'ai un contrôle de formulaire avec nom 'question1' à l'intérieur de la forme de l'objet parentForm et j'ai souscrites de la manière suivante.

Son un bouton radio avec deux options Yes et No, lorsque je sélectionne No - je obtenir Yes et lorsque je sélectionne Yes son un 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 a la valeur correcte, mais si je ne console.log(this.parentForm.value['question1'] il donne de la valeur précédente.

J'ai essayé de mettre un setTimeout() avant l'extraction de la valeur de this.parentForm.value['question1'], Il fonctionne très bien.

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

Mais ma question est pourquoi parentForm n'est pas mis à jour lors de son contrôle les changements de la valeur et que je suis la récupération de sa valeur qu'après la valeur a été modifiée.

Remarque: je ne veux pas d'observer pour parentForm.valueChanges, pas mon exigence.

Donc, ce qui vous empêche d'utiliser selectedValue?
À l'aide de this.parentForm.value['question1'] je peux y accéder de n'importe où au sein de la composante. selectedValue n'a qu'une portée locale.

OriginalL'auteur Amit Chigadani | 2017-07-04

  1. 22

    La valueChanges événement est déclenché après la nouvelle valeur est mise à jour à la FormControl valeur, et avant la modification est propagée à ses parents et ancêtres. Par conséquent, vous devez accéder à la valeur de la FormControl lui-même (qui vient d'être corrigé), pas un champ de la FormGroup objet de valeur (qui n'est épargné au cours de l'événement).

    À la lumière de cela, utilisez de l' this.parentForm.get('question1').value à la place:

    this.parentForm.controls['question1'].valueChanges.subscribe(
    (selectedValue) => {
      console.log(selectedValue);
      console.log(this.parentForm.get('question1').value);     
    }
);
    Merci! Cela fonctionne parfaitement. Aucune idée de pourquoi l'autre méthode ne fonctionne pas?
    J'ai mis à jour ma réponse à faire quelques explications, veuillez jeter un oeil.
    La fonctionnalité décrite ici est marqué comme étant un bug: github.com/angular/angular/issues/13129
    RxJS les opérateurs peuvent gérer l'abonnement de résultat et de l'extrait précédent et suivant sans l'aide du formulaire de contrôle de la valeur: stackoverflow.com/a/54205373/1148107

    OriginalL'auteur Harry Ninh

  2. 12

    valueChanges est un fait Observable de sorte que vous pouvez pipe pairwise pour obtenir le précédent et suivant des valeurs dans l'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]) => ... );

    Exemple de travail en StackBlitz:
    https://stackblitz.com/edit/angular-reactive-forms-vhtxua

    paires devraient être la réponse.

    OriginalL'auteur mtpultz

  3. 4

    Il y a une option de plus, mais il pourrait ne pas convenir dans tous les cas: vous pouvez attendre un tick avant la selectedValue est mis à jour en FormControl:

    setTimeout( () => console.log( selectedValue ) );

    Plus sur sync/async formes sujet: Formes réactives Angulaire Guide docs.

    OriginalL'auteur nesinervink

  4. 1

    Essayer de faire de cette

    this.parentForm.controls['question1'].valueChanges.subscribe(
    (selectedValue) => {
      console.log(selectedValue);
      console.log(this.parentForm.value.question1);     
    }
);

    si les contrôles de FormBuilder a été mis à jour, vous pouvez immédiatement récupérer la dernière valeur d'FormBuilder objet par le biais de la valeur de la propriété

    Ceci est très similaire à la a accepté de répondre.

    OriginalL'auteur Miguel Angel Leyva Guadalupe