Lors de l'utilisation du rappel valueChanges dans Angular, j'ai remarqué que les valeurs form.get('field').value et form.value.field ne sont pas les mêmes.

Exemple:

this.form = this.fb.group({
  email: ['default@example.com'],
)}

this.form.get('email').valueChanges.subscribe(value => {
  console.log(this.form.get('email').value);
  console.log(this.form.value.email);
});

Au premier changement, this.form.get('email').value sera égal à la valeur de value (= la valeur mise à jour). Mais this.form.value.email sera toujours égal à default@example.com.

  • Est-ce un comportement attendu?
  • Dois-je toujours utiliser this.form.get('email').value plutôt que this.form.value.email ?

Vous pouvez également essayer le stackblitz ici https://stackblitz.com/edit/angular-8-reactive-form-jrvley?file=src/app/app.component.ts

2
emery 14 févr. 2020 à 18:09

1 réponse

Meilleure réponse

C'est parce que vous vous connectez à partir des modifications de contrôle de formulaire et que le groupe de formulaires n'a probablement pas encore été mis à jour.

Si vous enregistrez la valeur du groupe de formulaires à partir des changements de valeur du groupe de formulaires observables, vous voyez des résultats correspondants.

https://stackblitz.com/edit/angular-8-reactive-form-fg8hws

J'ai changé

this.contactForm.get('email').valueChanges.subscribe(value => {
  console.log(`VALUE: ${value}`);
  console.log(`FORM CONTROL VALUE: ${this.contactForm.get('email').value}`);
  console.log(`FORM VALUE: ${this.contactForm.value.email}`);
})

À

this.contactForm.get('email').valueChanges.subscribe(value => {
  console.log(`VALUE: ${value}`);
  console.log(`FORM CONTROL VALUE: ${this.contactForm.get('email').value}`);      
})

this.contactForm.valueChanges.subscribe(value => {
  console.log(`FORM VALUE: ${this.contactForm.value.email}`);
})

Éditer:

Et pour répondre à votre autre question, j'utilise toujours la syntaxe this.form.get('name'). Principalement pour la compatibilité avec les formulaires construits dynamiquement.

3
Kurt Hamilton 14 févr. 2020 à 15:14