onchange equivalente em angular2

93

Estou usando o onchange para salvar o valor do meu intervalo de entrada no firebase, mas tenho um erro que diz que minha função não está definida.

esta é minha função

saverange(){
  this.Platform.ready().then(() => {
    this.rootRef.child("users").child(this.UserID).child('range').set(this.range)
  })
} 

este é meu html

<ion-item>
  <ion-row>
    <ion-col>Rayon <span favorite><strong> {{range}} km</strong></span></ion-col>
    <ion-col><input type="range" name="points" min="0" max="40" [(ngModel)]="range" onchange="saverange()"></ion-col>
  </ion-row>
</ion-item>

o que é o equivalente a onchange em angular, se houver. obrigado

PrinceZee
fonte
1
(change), Faltam 5
Eric Martinez,

Respostas:

177

Podemos usar associações de eventos angulares para responder a qualquer evento DOM . A sintaxe é simples. Colocamos o nome do evento DOM entre parênteses e atribuímos uma instrução de modelo entre aspas a ele. - referência

Como changeestá na lista de eventos DOM padrão , podemos usá-lo:

(change)="saverange()"

Em seu caso específico, como você está usando o NgModel, você poderia quebrar a ligação bidirecional assim:

[ngModel]="range" (ngModelChange)="saverange($event)"

Então

saverange(newValue) {
  this.range = newValue;
  this.Platform.ready().then(() => {
     this.rootRef.child("users").child(this.UserID).child('range').set(this.range)
  })
} 

No entanto, com esta abordagem saverange()é chamada a cada pressionamento de tecla, então provavelmente é melhor usar (change).

Mark Rajcok
fonte
Estranhamente, isso não funciona para mim por algum motivo, a função não é disparada ... Não tenho certeza do porquê. Parece que na versão recente do Angular você tem que usar (entrada), para o elemento de entrada do tipo texto.
Vladimir Despotovic
10

No Angular você pode definir event listenerscomo no exemplo abaixo:

<!-- Here you can call public methods from parental component -->
<input (change)="method_name()"> 
Kuldeep Kumar
fonte
3
considere adicionar mais informações em sua resposta
Inder
3

@Mark Rajcok ofereceu uma ótima solução para projetos de íons que incluem uma entrada do tipo faixa.

Em qualquer outro caso de projetos não iônicos, sugerirei o seguinte:

HTML:

<input type="text" name="points" #points maxlength="8" [(ngModel)]="range" (ngModelChange)="range=saverange($event, points)">

Componente:

    onChangeAchievement(eventStr: string, eRef): string {

      //Do something (some manipulations) on input and than return it to be saved:

       //In case you need to force of modifing the Element-Reference value on-focus of input:
       var eventStrToReplace = eventStr.replace(/[^0-9,eE\.\+]+/g, "");
       if (eventStr != eventStrToReplace) {
           eRef.value = eventStrToReplace;
       }

      return this.getNumberOnChange(eventStr);

    }

A ideia aqui:

  1. Deixando o (ngModelChange) método fazer o trabalho do Setter:

    (ngModelChange)="range=saverange($event, points)

  2. Habilitando o acesso direto ao elemento Dom nativo usando esta chamada:

    eRef.value = eventStrToReplace;

Dudi
fonte