4
votes

Formes réactives angulaires: changement vs valeur

J'utilise des formes réactives dans Angular 7.

J'ai de nombreux champs qui dépendent d'autres champs.

Ce dont je suis curieux de savoir que dois-je utiliser (change) ou this.form.get ("control_name"). valueChanges ?

Par ex. les deux fonctionneront en entrée. Je veux connaître la différence, les avantages et les inconvénients entre eux.

Qu'est-ce qui est meilleur avec les performances?


0 commentaires

3 Réponses :


13
votes

Considérons simplement que ce que vous recherchez est d'écouter un changement sur une balise input de type="text"

Dans le cas de valueChanges

Puisqu'il s'agit d'un observable, il se déclenchera avec une nouvelle valeur. Cette valeur sera la valeur modifiée du champ input . Et pour l'écouter, vous devrez souscrire à l'Observable valueChanges . Quelque chose comme ceci:

zipCodeFormControl
  .valueChanges
  .pipe(
    debounceTime(500),
    distinctUntilChanged(),
    switchMap(
      zipcode => getAddressFromZipcode(zipcode)
    ),
    map(res => res.actualResult)
  )
  .subscribe(addressComponents => {
    // Here you can extract the specific Address Components
    // that you want to auto fill in your form and call the patchValue method on your form or the controls individually
  });

Dans le cas de l'événement (change)

Dans le cas du changement , pour la balise input , l'événement change ne se déclenchera qu'une fois que vous flou loin de ce champ de saisie . De plus, dans ce cas, vous obtiendrez l'objet $ event . Et à partir de cet objet $ event , vous devrez extraire la valeur du champ.


Donc, dans le code, cela ressemblera à quelque chose comme ceci:

XXX

Et dans le modèle:

<form [formGroup]="form1">
  <input type="text" formControlName="name">
  <input type="text" formControlName="email">
</form>

<hr>

<form [formGroup]="form2">
  <input type="text" formControlName="name" (change)="onForm2NameChange($event)">
  <input type="text" formControlName="email">
</form>

Voici un fonctionnel Exemple de StackBlitz pour votre référence.


REMARQUE: Cela dépend complètement de votre cas d'utilisation pour savoir lequel serait le plus approprié.


MISE À JOUR: h3 >

Pour votre cas d'utilisation spécifique, je suggérerais d'utiliser les opérateurs RxJS pour faire le travail. Quelque chose comme ceci:

import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({...})
export class AppComponent  {
  name = 'Angular';
  form1: FormGroup;
  form2: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form1 = this.fb.group({
      name: [],
      email: []
    });

    this.form2 = this.fb.group({
      name: [],
      email: []
    });

    this.form1.controls['name'].valueChanges.subscribe(change => {
      console.log(change);
    });
  }

  onForm2NameChange({ target }) {
    console.log(target.value);
  }

}


4 commentaires

C'est le but. À ce stade, je crée des formulaires. Je ne sais pas quoi utiliser.


Avec les informations jusqu'à présent, je pense qu'en ce qui concerne les performances, (change) serait mieux car il n'est appelé qu'une fois que vous flou loin du terrain. Mais. sans exemple plus concret, c'est difficile à déterminer. Peut-être créer un exemple qui peut mettre en évidence le problème auquel vous êtes confronté et peut-être pourrais-je donner de meilleures suggestions.


J'ai juste une entrée de zip. En cas de changement, je dois appeler le service pour obtenir des données telles que l'état, le pays, la ville ...


@AnkurAkvaliya, j'ai mis à jour ma réponse. Veuillez vérifier si cela fonctionne pour votre cas d'utilisation.



3
votes

C'est au cas par cas, mais je trouve que des éléments tels que les cases à cocher et les boutons radio (contrôles de type vrai / faux) fonctionnent mieux avec le gestionnaire (change) et les entrées et les champs de texte sont généralement plus adaptés aux changements de valeur.

Bien que je ne sois pas sûr des performances, je suppose que ce serait le cas d'utilisation idéal pour prendre cette décision.

Un bon cas d'utilisation pour valueChanges (pour tout) est une forme complexe avec beaucoup de logique ngIf. Parfois, ces formulaires ont besoin d'une "réaction en chaîne" des changements de valeur pour fonctionner correctement, auquel cas un gestionnaire (de changement) serait inutile


0 commentaires

0
votes

Dans le cas d'un champ de saisie (texte), je suggérerais d'utiliser soit changeValues ​​ soit value en fonction de votre cas d'utilisation:

  • Si vous souhaitez mettre en œuvre quelque chose de similaire à la "fonctionnalité de saisie semi-automatique de Google", c'est-à-dire pour fournir des suggestions (de recherche) au fur et à mesure de la saisie → utilisez changeValues ​​.
  • Pour tous les autres cas, j'utiliserais change .

Ce n'est qu'une règle de base, cependant, le diable est dans les détails.

Voici le code d'un exemple de travail que j'ai écrit en faisant mes propres recherches / tests, il implémente les deux approches à des fins de comparaison:


0 commentaires