(changement) vs (ngModelChange) en angulaire


326

Angular 1 n'accepte pas d' onchange()événement, il accepte uniquement l' ng-change()événement.

Angular 2, en revanche, accepte à la fois les événements (change)et (ngModelChange), qui semblent faire la même chose.

Quelle est la différence?

lequel est le meilleur pour la performance?

ngModelChange :

<input type="text" pInputText class="ui-widget ui-text"
    (ngModelChange)="clearFilter()" placeholder="Find"/>

vs changement :

<input type="text" pInputText class="ui-widget ui-text" 
    (change)="clearFilter()" placeholder="Find"/>

2
Je ne veux pas les comparer. Je veux juste savoir lequel est le meilleur pour la performance?
Ramesh Rajendran

6
Oui, il n'y a pas de comparaison. Si vous utilisez ngModel, vous pouvez utiliser le dernier sinon le premier. Il est toujours préférable d'éviter ngModel car c'est une liaison de données bidirectionnelle, donc mauvaise pour les performances
Vamshi

2
Édité pour mettre l'accent sur «quelle est la différence» et «qui est plus performant» pour supprimer la subjectivité et a voté pour la réouverture.
ruffin

12
Dans Angular 7, le (ngModelChange) = "eventHandler ()" se déclenchera AVANT que la valeur liée à [(ngModel)] = "value" soit modifiée tandis que le (change) = "eventHandler ()" se déclenchera APRÈS la valeur liée au [(ngModel)] = "valeur" est modifié.
CAK2

4
Soit dit en passant, l'événement (change) n'est déclenché que lorsque le focus quitte l'entrée. Si vous souhaitez qu'un événement se déclenche après chaque pression sur une touche, vous pouvez utiliser l'événement (entrée).
John Gilmer

Réponses:


496

(change) événement lié à l'événement de changement d'entrée classique.

https://developer.mozilla.org/en-US/docs/Web/Events/change

Vous pouvez utiliser (modifier) ​​l'événement même si vous n'avez pas de modèle à votre entrée comme

<input (change)="somethingChanged()">

(ngModelChange)est la @Outputdirective de ngModel. Il se déclenche lorsque le modèle change. Vous ne pouvez pas utiliser cet événement sans la directive ngModel.

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L124

Comme vous en découvrez plus dans le code source, (ngModelChange)émet la nouvelle valeur.

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169

Cela signifie donc que vous avez la capacité d'une telle utilisation:

<input (ngModelChange)="modelChanged($event)">
modelChanged(newObj) {
    // do something with new value
}

Fondamentalement, il semble qu'il n'y ait pas de grande différence entre deux, mais les ngModelévénements gagnent en puissance lorsque vous les utilisez [ngValue].

  <select [(ngModel)]="data" (ngModelChange)="dataChanged($event)" name="data">
      <option *ngFor="let currentData of allData" [ngValue]="currentData">
          {{data.name}}
      </option>
  </select>
dataChanged(newObj) {
    // here comes the object as parameter
}

supposons que vous essayez la même chose sans « ngModelchoses»

<select (change)="changed($event)">
    <option *ngFor="let currentData of allData" [value]="currentData.id">
        {{data.name}}
    </option>
</select>
changed(e){
    // event comes as parameter, you'll have to find selectedData manually
    // by using e.target.data
}

1
Que se passera-t-il si j'utilise l'événement change avec l'objet ngmodel?
Ramesh Rajendran

6
@RameshRajendran J'ai amélioré la réponse. Vous pouvez toujours utiliser l'événement de modification avec l'objet ngModel, mais l'événement de modification transmet le paramètre d'événement, l'événement ngModelChange transmet la nouvelle valeur.
omeralper

1
Ouais +1. Mais j'ai un problème avec ngmodelchange, lorsque vous effacez toutes les valeurs de la zone de texte en utilisant ctr + A. alors ngModelChange ne se déclenche pas.
Ramesh Rajendran

6
<input (ngModelChange)="modelChanged($event)">n'est pas juste, [ngModel]est requis.
e-cloud

3
Quelque chose, vous ne pouvez pas faire un (change), dans ce cas, vous pouvez faire un(onClick)="yourFunction(youParameter)"
jpmottin

83

Dans Angular 7, le (ngModelChange)="eventHandler()"sera déclenché avant que la valeur liée à ne [(ngModel)]="value"soit modifiée tandis que le (change)="eventHandler()"sera déclenché après que la valeur liée à [(ngModel)]="value"ait été modifiée.


1
Je viens de tester dans Angular 7.1 et la valeur du ngModel est mise à jour avant l'appel de l'événement. Voilà donc ce que j'utilise
Jahrenski

Cela fonctionnait également en angulaire 6. +1 pour avoir économisé mon temps :)
Hemadri Dasari

1
N'est-ce pas l'inverse? Selon les documents angulaires se ngModelChangedéclenche après la mise à jour du modèle de vue.
rage du

3
Dans la dernière documentation d'angular, ce cas est décrit: angular.io/guide/…
pioro90

4
Dans Angular 7.2, l' (ngModelChange)événement est en effet déclenché avant que la valeur ne soit modifiée et (change) après qu'elle ait changé. Merci pour l'info, super utile!
Dennis Ameling

15

Comme je l'ai trouvé et écrit dans un autre sujet - cela s'applique à angulaire <7 (je ne sais pas comment c'est dans 7+)

Juste pour l'avenir

nous devons constater que [(ngModel)]="hero.name"est juste un raccourci qui peut être désucrage à: [ngModel]="hero.name" (ngModelChange)="hero.name = $event".

Donc, si nous décodons le code, nous nous retrouverions avec:

<select (ngModelChange)="onModelChange()" [ngModel]="hero.name" (ngModelChange)="hero.name = $event">

ou

<[ngModel]="hero.name" (ngModelChange)="hero.name = $event" select (ngModelChange)="onModelChange()">

Si vous inspectez le code ci-dessus, vous remarquerez que nous nous retrouvons avec 2 ngModelChangeévénements et ceux-ci doivent être exécutés dans un certain ordre.

Pour résumer: si vous placez ngModelChangeavant ngModel, vous obtenez la $eventcomme nouvelle valeur, mais votre objet modèle contient toujours la valeur précédente. Si vous le placez après ngModel, le modèle aura déjà la nouvelle valeur.

LA SOURCE


Merci de l'avoir signalé! J'ai eu ce problème jusqu'à ce que je trouve votre explication
omostan

2

1 - (change) est lié à l'événement HTML onchange. La documentation sur HTML onchange dit ce qui suit:

Exécuter un JavaScript lorsqu'un utilisateur modifie l'option sélectionnée d'un <select>élément

Source: https://www.w3schools.com/jsref/event_onchange.asp

2 - Comme indiqué précédemment, (ngModelChange)est lié à la variable de modèle liée à votre entrée.

Donc, mon interprétation est:

  • (change)se déclenche lorsque l' utilisateur modifie l'entrée
  • (ngModelChange) se déclenche lorsque le modèle change, qu'il soit consécutif ou non à une action de l'utilisateur
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.