web-dev-qa-db-fra.com

Angular 2 changement d'événement à chaque pression de touche

L'événement de modification n'est appelé qu'une fois que le focus de l'entrée a été modifié. Comment puis-je faire en sorte que l'événement se déclenche à chaque pression de touche?

<input type="text" [(ngModel)]="mymodel" (change)="valuechange($event)" />
{{mymodel}}

La deuxième liaison change à chaque pression de touche.

angular
204
daniel

Je viens d'utiliser l'entrée d'entrée et cela a bien fonctionné comme suit:

dans le fichier .html:

<input type="text" class="form-control" (input)="onSearchChange($event.target.value)">

dans le fichier .ts:

onSearchChange(searchValue: string): void {  
  console.log(searchValue);
}
349
Ramy Feteha

Utilisez ngModelChange en décomposant la syntaxe [(x)] en deux parties, à savoir propriété, liaison de données et liaison d’événement:

<input type="text" [ngModel]="mymodel" (ngModelChange)="valuechange($event)" />
{{mymodel}}

valuechange(newValue) {
  mymodel = newValue;
  console.log(newValue)
}

Cela fonctionne aussi pour la touche Retour arrière.

175
Mark Rajcok

L'événement (keyup) est votre meilleur pari.

Voyons pourquoi:

  1. (changement) comme vous avez mentionné les déclencheurs que lorsque l'entrée perd le focus, son utilisation est donc limitée.
  2. (touche) se déclenche en appuyant sur une touche, mais ne se déclenche pas en appuyant sur certaines touches, comme le retour arrière.
  3. (keydown) se déclenche chaque fois qu'une touche est enfoncée. Par conséquent, il y a toujours un décalage de 1 caractère. car il obtient l'état de l'élément avant l'enregistrement de la frappe.
  4. (keyup) est votre meilleur choix car il se déclenche à chaque fois qu'un événement de touche clé est terminé, ce qui inclut également le personnage le plus récent.

Donc (keyup) est le plus sûr pour aller avec ...

  • enregistre un événement sur chaque frappe de touche contrairement à un événement (change)
  • inclut les touches que (touche) ignore
  • n'a pas de décalage contrairement à l'événement (keydown)
60
Sagar
<input type="text" [ngModel]="mymodel" (keypress)="mymodel=$event.target.value"/>
{{mymodel}}
34
Günter Zöchbauer

Une autre façon de gérer de tels cas consiste à utiliser formControl et à souscrire à valueChanges lorsque votre composant est initialisé, ce qui vous permettra d'utiliser rxjs opérateurs pour les exigences avancées comme effectuer des requêtes http, appliquer un anti-rebond jusqu'à ce que l'utilisateur ait fini d'écrire une phrase, prendre la dernière valeur et omettre les options précédentes, ...

import {Component, OnInit} from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'some-selector',
  template: `
    <input type="text" [formControl]="searchControl" placeholder="search">
  `
})
export class SomeComponent implements OnInit {
  private searchControl: FormControl;
  private debounce: number = 400;

  ngOnInit() {
    this.searchControl = new FormControl('');
    this.searchControl.valueChanges
      .pipe(debounceTime(this.debounce), distinctUntilChanged())
      .subscribe(query => {
        console.log(query);
      });
  }
}
20
Salem Ouerdani

L'événement secret qui garde angular ngModel synchrone est l'appel à l'événement entrée. La meilleure réponse à votre question devrait donc être:

<input type="text" [(ngModel)]="mymodel" (input)="valuechange($event)" />
{{mymodel}}
17
Emeka Obianom
<input type="text" (keypress)="myMethod(myInput.value)" #myInput />

archive .ts

myMethod(value:string){
...
...
}
4
Ulric Merguiço

Ce que tu recherches, c'est

<input type="text" [(ngModel)]="mymodel" (keyup)="valuechange()" />
{{mymodel}}

Ensuite, faites ce que vous voulez avec les données en accédant au this.mymodel lié de votre fichier .ts.

2
Sanket Berde

Dans mon cas, la solution est:

[ngModel]="X?.Y" (ngModelChange)="X.Y=$event"
2
hatem htira