(cambio) vs (ngModelChange) en angular

326

Angular 1 no acepta onchange()eventos, solo acepta ng-change()eventos.

Angular 2, por otro lado, acepta ambos (change)y (ngModelChange)eventos, que parecen estar haciendo lo mismo.

¿Cual es la diferencia?

¿Cuál es el mejor para el rendimiento?

ngModelChange :

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

vs cambio :

<input type="text" pInputText class="ui-widget ui-text" 
    (change)="clearFilter()" placeholder="Find"/>
Ramesh Rajendran
fuente
2
No quiero compararlos. ¿Solo quiero saber cuál es el mejor para el rendimiento?
Ramesh Rajendran
66
Sí, no hay comparación. Si está usando ngModel, puede usar el último, de lo contrario el primero. Siempre se prefiere evitar ngModel, ya que es un enlace de datos bidireccional, por lo tanto, es malo para el rendimiento
Vamshi
2
Editado para poner énfasis en "cuál es la diferencia" y "cuál es más eficaz" para eliminar la subjetividad y votó para reabrir.
ruffin
12
En Angular 7, (ngModelChange) = "eventHandler ()" se disparará ANTES de que se cambie el valor vinculado a [(ngModel)] = "value" mientras que (change) = "eventHandler ()" se disparará DESPUÉS del valor vinculado a [(ngModel)] = "valor" ha cambiado.
CAK2
44
Por cierto, el evento (cambio) se dispara solo cuando el foco deja la entrada. Si desea que se active un evento después de cada pulsación de tecla, puede usar el evento (entrada).
John Gilmer el

Respuestas:

496

(change) evento vinculado al evento de cambio de entrada clásico.

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

Puede usar el evento (cambio) incluso si no tiene un modelo en su entrada como

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

(ngModelChange)es la @Outputdirectiva ngModel. Se dispara cuando el modelo cambia. No puede usar este evento sin la directiva ngModel.

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

A medida que descubra más en el código fuente, (ngModelChange)emite el nuevo valor.

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

Entonces significa que tiene la capacidad de tal uso:

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

Básicamente, parece que no hay una gran diferencia entre dos, pero los ngModeleventos ganan poder cuando los usas [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
}

suponga que intenta lo mismo sin " ngModelcosas"

<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
}
omeralper
fuente
1
¿Qué sucederá si estoy usando el evento change con el objeto ngmodel?
Ramesh Rajendran
66
@RameshRajendran He mejorado la respuesta. Todavía puede usar el evento change con el objeto ngModel, pero el evento change pasa el parámetro del evento, el evento ngModelChange pasa el nuevo valor.
omeralper
1
Sí +1. Pero tengo un problema con ngmodelchange, cuando borra todos los valores del cuadro de texto usando ctr + A., entonces ngModelChange no se dispara.
Ramesh Rajendran
66
<input (ngModelChange)="modelChanged($event)">No es correcto, [ngModel]es obligatorio.
e-cloud
3
Algo, no puedes hacer un (change), en este caso, puedes hacer un(onClick)="yourFunction(youParameter)"
jpmottin
83

En Angular 7, (ngModelChange)="eventHandler()"se disparará antes de que [(ngModel)]="value"se cambie el valor vinculado, mientras que (change)="eventHandler()"se disparará después de que [(ngModel)]="value"se cambie el valor vinculado .

CAK2
fuente
1
Acabo de probar en Angular 7.1 y el valor del ngModel se actualiza antes de que se llame al evento. Así que eso es lo que uso
Jahrenski
Funcionó en angular 6 también. +1 por ahorrar mi tiempo :)
Hemadri Dasari
1
¿No es al revés? Según los documentos de Angular Docs, sengModelChange activan las actualizaciones del modelo de vista.
ira
3
En la última documentación de angular se describe este caso: angular.io/guide/…
pioro90
44
En Angular 7.2, de hecho, el (ngModelChange)evento se dispara antes de que se cambie el valor y (change) después de que haya cambiado. Gracias por la información, super útil!
Dennis Ameling
15

Como he encontrado y escrito en otro tema, esto se aplica a angular <7 (no estoy seguro de cómo es en 7+)

Solo para el futuro

hay que observar que [(ngModel)]="hero.name"es sólo un atajo que puede ser azucarado-de a: [ngModel]="hero.name" (ngModelChange)="hero.name = $event".

Entonces, si eliminamos el código de azúcar, terminaríamos con:

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

o

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

Si inspecciona el código anterior, notará que terminamos con 2 ngModelChangeeventos y esos deben ejecutarse en algún orden.

En resumen: si coloca ngModelChangeantes ngModel, obtiene el $eventcomo el nuevo valor, pero su objeto modelo todavía tiene el valor anterior. Si lo coloca después ngModel, el modelo ya tendrá el nuevo valor.

FUENTE

Desastre
fuente
¡Gracias por señalar esto! Tuve este problema hasta que encontré tu explicación
omostan
2

1: (change) está vinculado al evento de cambio de HTML. La documentación sobre HTML onchange dice lo siguiente:

Ejecuta un JavaScript cuando un usuario cambia la opción seleccionada de un <select>elemento

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

2 - Como se indicó anteriormente, (ngModelChange)está vinculado a la variable de modelo vinculada a su entrada.

Entonces, mi interpretación es:

  • (change)se dispara cuando el usuario cambia la entrada
  • (ngModelChange) se dispara cuando el modelo cambia, ya sea consecutivo a una acción del usuario o no
Julien
fuente