(change) vs (ngModelChange) em angular

326

Angular 1 não aceita onchange()evento, apenas aceita ng-change()evento.

O Angular 2, por outro lado, aceita ambos (change)e (ngModelChange)eventos, que ambos parecem estar fazendo a mesma coisa.

Qual é a diferença?

qual é o melhor para o desempenho?

ngModelChange :

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

vs mudança :

<input type="text" pInputText class="ui-widget ui-text" 
    (change)="clearFilter()" placeholder="Find"/>
Ramesh Rajendran
fonte
2
Eu não quero comparar isso. Eu só quero saber qual é o melhor para o desempenho?
Ramesh Rajendran
6
Sim, não há comparação. Se você estiver usando o ngModel, poderá usar o posterior, caso contrário, o primeiro. É sempre preferível para evitar ngModel já que é dois dados forma vinculativa, portanto, ruim para o desempenho
Vamshi
2
Editado para enfatizar "qual é a diferença" e "qual é o melhor desempenho" para remover a subjetividade e votou para reabrir.
Ruffin
12
No Angular 7, o (ngModelChange) = "eventHandler ()" será acionado ANTES que o valor associado a [(ngModel)] = "valor" seja alterado enquanto o (change) = "eventHandler ()" será acionado APÓS o valor associado a [(ngModel)] = "valor" é alterado.
CAK2
4
A propósito, o evento (change) é acionado somente quando o foco sai da entrada. Se você deseja que um evento seja disparado após cada pressionamento de tecla, você pode usar o evento (entrada).
John Gilmer

Respostas:

496

(change) evento vinculado ao evento de alteração de entrada clássica.

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

Você pode usar o evento (change) mesmo que não tenha um modelo em sua entrada como

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

(ngModelChange)é a @Outputdiretiva ngModel. É acionado quando o modelo é alterado. Você não pode usar este evento sem a diretiva ngModel.

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

À medida que você descobre mais no código-fonte, (ngModelChange)emite o novo valor.

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

Então isso significa que você tem a capacidade de tal uso:

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

Basicamente, parece que não há grande diferença entre dois, mas os ngModeleventos ganham força quando você o usa [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
}

suponha que você tente a mesma coisa sem " ngModelcoisas"

<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
fonte
1
O que acontecerá se eu estiver usando o evento change com o objeto ngmodel?
Ramesh Rajendran
6
@RameshRajendran Melhorei a resposta. Você ainda pode usar o evento de mudança com o objeto ngModel, mas o evento de mudança passa o parâmetro do evento, o evento de ngModelChange passa um novo valor.
Omeralper 13/07
1
Sim +1. Mas eu tenho um problema com o ngmodelchange, quando você limpa todos os valores da caixa de texto usando ctr + A., em seguida, o ngModelChange não é acionado.
Ramesh Rajendran
6
<input (ngModelChange)="modelChanged($event)">não está certo, [ngModel]é necessário.
e-cloud
3
Algo, você não pode fazer um (change), neste caso, você pode fazer um(onClick)="yourFunction(youParameter)"
jpmottin
83

No Angular 7, o (ngModelChange)="eventHandler()"disparo será acionado antes que o valor vinculado [(ngModel)]="value"seja alterado, enquanto o (change)="eventHandler()"disparo será acionado após o valor vinculado a [(ngModel)]="value"ser alterado.

CAK2
fonte
1
Acabei de testar no Angular 7.1 e o valor do ngModel é atualizado antes do evento ser chamado. Então é isso que eu uso
Jahrenski
Também funcionou no angular 6. +1 para salvar o meu tempo :)
Hemadri Dasari
1
Não é o contrário? De acordo com o Angular Docs, é ngModelChange acionado após a atualização do modelo de exibição.
raiva
3
Na documentação mais recente da angular neste caso é descrito: angular.io/guide/...
pioro90
4
No Angular 7.2, na verdade o (ngModelChange)evento é disparado antes que o valor seja alterado e (change) depois que ele foi alterado. Obrigado pela informação, super útil!
Dennis Ameling
15

Como eu encontrei e escrevi em outro tópico - isso se aplica a angular <7 (não tenho certeza de como está no 7+)

Apenas para o futuro

precisamos observar que [(ngModel)]="hero.name"é apenas um atalho que pode ser retirado o açúcar para: [ngModel]="hero.name" (ngModelChange)="hero.name = $event".

Portanto, se descodificarmos o código, acabaremos com:

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

ou

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

Se você inspecionar o código acima, notará que terminamos com 2 ngModelChangeeventos e esses precisam ser executados em alguma ordem.

Resumindo: se você colocar ngModelChangeantes ngModel, obtém o $eventvalor como novo, mas o objeto do modelo ainda mantém o valor anterior. Se você o colocar depois ngModel, o modelo já terá o novo valor.

FONTE

Desastre
fonte
Obrigado por apontar isto! Eu tive esse problema até encontrar sua explicação
omostan 20/02
2

1 - (change) está associado ao evento HTML onchange. A documentação sobre o HTML onchange diz o seguinte:

Executar um JavaScript quando um usuário alterar a opção selecionada de um <select>elemento

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

2 - Como mencionado anteriormente, (ngModelChange)está vinculado à variável do modelo vinculada à sua entrada.

Então, minha interpretação é:

  • (change)dispara quando o usuário altera a entrada
  • (ngModelChange) é acionado quando o modelo muda, seja consecutivo a uma ação do usuário ou não
Julien
fonte