Angulaire 2 variation de l'événement sur chaque pression de touche

L'événement de changement n'est appelée qu'une fois le focus de l'entrée a changé. 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 des changements sur chaque pression de touche btw.

InformationsquelleAutor daniel | 2016-02-12

angular

333

J'ai simplement utilisé l'événement d'entrée et il a bien fonctionné comme suit:

dans .fichier html :
```
<input type="text" class="form-control" (input)="onSearchChange($event.target.value)">
```
dans .ts fichier :
```
onSearchChange(searchValue: string): void {  
  console.log(searchValue);
}
```
- Il fonctionne sur Angulaire 4 aussi. Je vous remercie.
- cela fonctionne avec la touche retour arrière trop
- Bon. Fonctionne pour moi.
- c'est exactement ce que je cherchais
- son travail dans angulaire 6 aussi.
- comment pouvons-nous retarder pour quelque temps?
- Fonctionne très bien! Merci
- Fonctionne très bien, Merci beaucoup
- L' (entrée) de l'événement n'est pas pris en charge à Bord et IE navigateurs. Quelle est l'alternative pour cette en Bord de navigateur?
- Non de ces travaux lors de passé depuis le presse-papiers!
- Merci, parfait pour Angulaires 6.
InformationsquelleAutor Ramy Feteha
173

Utilisation ngModelChange en brisant les [(x)] syntaxe dans son deux pièces, c'est à dire, la propriété de la liaison de données et de liaison d'événement:
```
<input type="text" [ngModel]="mymodel" (ngModelChange)="valuechange($event)" />
{{mymodel}}
```
```
valuechange(newValue) {
  mymodel = newValue;
  console.log(newValue)
}
```
Il travaille pour la touche retour arrière trop.
- sympa, mais savez-vous pourquoi cela fonctionne? je pense que [(ngModel)]="monmodèle" est juste un raccourci pour ce que vous avez.
- Mais lors de l'utilisation de la banane dans une boîte de syntaxe, il ne change que le modèle, mais tu ne peux pas brancher quelque chose sur le changement de l'événement.
- Merci, mon problème est résolu grâce à vos codes.
- Ce doit être la accepté de répondre.
- C'est une excellente réponse pour mieux les deux sens de la liaison de données. Doit être accepté de répondre!
- la touche de retour arrière n'est pas mise à jour du modèle
- Que la solution est correcte. Cependant, être conscient que ngModelChange est déclenché AVANT la valeur des mises à jour. De sorte que le "newValue' dans cet exemple contient le modèle SANS la clé que vous venez pressé - de sorte que vous n'avez pas la mise à jour du modèle. Si vous voulez avoir le dernier modèle de la valeur, de l'utilisation de l' (keyup) de l'événement.
- Utilisation: [ngModelOptions]="{autonome: true}" si vous voulez l'utiliser dans un réactif de
- avec la dernière mise à jour (angulaire 6) la (ngModelChange) événement capture de la dernière valeur, ce qui évite d'avoir [ngModelOptions]="{autonome: true}"
- Cela ne fonctionne pas pour revenir en arrière. (keyup) événement est le mieux pour tous les cas.
- la version Angulaire avez-vous? Pour moi, il ne détecte pas de retour arrière dans Angulaire 6.1.3
- Je suis en utilisant 5.2.9
- qu'est-ce que l'approche finale que vous avez pris. Nous utilisons la version 5.2.10 et j'ai le même problème avec la touche retour arrière.
- Je suis sur (entrée)="valuechange()"
InformationsquelleAutor Mark Rajcok
57

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

Voyons pourquoi:
1. (changer) comme vous l'avez mentionné ne se déclenche que lorsque l'entrée perd le focus, est donc d'une utilité limitée.
2. (keypress) déclencheurs sur les touches, mais ne déclenche pas sur certaines touches du clavier comme la touche d'effacement arrière.
3. (keydown) déclenche chaque fois qu'une touche est enfoncée. Donc toujours à la traîne par 1 caractère; comme il est l'élément de l'état avant la frappe a été enregistré.
4. (keyup) est votre meilleur pari qu'il déclenche chaque fois qu'une touche push événement est terminé, donc cela inclut aussi la plus récente de caractère.
Donc (keyup) est la plus sûre pour aller avec, car il...
- enregistre un événement sur chaque frappe à la différence (changement) de l'événement
- comprend les touches (touche) ignore
- a pas de décalage à la différence de l' (keydown) de l'événement
- Comme mentionné dans une des réponses, événement d'entrée fonctionne vraiment bien. keyup est certainement l'un des plus sûrs toutefois, les options, input événement est en avance d'une étape de keyup. keyup contrairement à input, ne fonctionne pas si la valeur de la textbox est modifié par un autre moyen comme la liaison.
- Sagar, merci beaucoup. Ce doit être la Accepté de Répondre comme il est le seul à aborder (change) à côté d'une solution de contournement et puis certains. La accepté de répondre totalement merdique!
- est-il une raison particulière pour laquelle vous voulez faire plus de (ngModelChange)?
- Cela devrait être acceptée et la plus sûre de répondre comme il est originaire et vous donne le plein contrôle et il est très expressif, parce que tout le monde qui lit elle sait exactement lorsque l'événement est déclenché.
- Sera cela fonctionne lorsque l'utilisateur de copier le texte à partir de quelque part d'autre et puis la coller dans notre zone de texte?
- Non, il ne le serait pas. Utilisation (entrée) si vous êtes à la recherche de quelque chose comme ça.
InformationsquelleAutor Sagar
34
```
<input type="text" [ngModel]="mymodel" (keypress)="mymodel=$event.target.value"/>
{{mymodel}}
```
- fonctionne, mais étrangement, la touche retour arrière n'est pas reconnu comme une pression de touche?
- Vous pouvez utiliser keydown ou keyup à la place. Certaines touches tout simplement de ne pas tirer sur keypress. Voir aussi stackoverflow.com/questions/4843472/...
- J'ai essayé keydown, keyup et le changement des événements, mais lorsque l'entrée est w le gestionnaire d'événement rapports de m'chaîne vide; lorsque l'entrée est nous le gestionnaire d'événement rapports pour moi w que l'entrée. Pouvez-vous expliquer pourquoi ce comportement?
- Utiliser la touche. L'entrée n'a pas encore changé sur keydown.
- C'est étrange, mais je suis un input lag sur ce où la valeur ne contient pas la valeur typée jusqu'à la prochaine pression de touche.
- L'exemple est un peu imparfait, parce qu'il n'est pas judicieux de lier [ngModel]="..." et (keypress)="..." le même champ (mymodel). Il serait plus logique d'avoir quelque chose comme (keypress)="myKeyPressHandler($event.target.value)". Je suis sûr que (keypress)="$event.target.value" seul passe toujours la plus récente valeur de la clé. Si ce n'est pas un Plunker qui permet de reproduire serait utile. Généralement (ngModelChange)="..." est une meilleure option de toute façon. Il fonctionne mieux avec [ngModel]="..."
InformationsquelleAutor Günter Zöchbauer
18

Une façon différente de gérer de tels cas est d'utiliser formControl et de vous abonner c'est valueChanges lorsque votre composant est initialisé, ce qui vous permettra d'utiliser rxjs opérateurs pour les exigences avancées comme l'exécution des requêtes http, appliquer un anti-rebond jusqu'à l'utilisateur de terminer l'écriture d'une phrase, prendre la dernière valeur sans précédent, ...
```
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);
      });
  }
}
```
- C'est parfait. Cela permet de maintenir le bavard de bruit lors de l'utilisation de ce pour asynchrone des requêtes http. Déjà met en place le changement des écouteurs d'événement. Génial! Merci!
- Heureux, il a aidé. Merci @hewstone
- En cas de commandes multiples, même code peut être appliqué avec FormGroup
InformationsquelleAutor Salem Ouerdani
17

Le secret de l'événement qui garde angulaire ngModel synchrone est l'événement d'appeler entrée. Donc la meilleure réponse à votre question devrait être:
```
<input type="text" [(ngModel)]="mymodel" (input)="valuechange($event)" />
{{mymodel}}
```
- cela ne fonctionne pas pour retour arrière
- Pour moi @AndreiDiaconescu
- L' (entrée) de l'événement n'est pas pris en charge à Bord et IE navigateurs. Quelle est l'alternative pour cette en Bord de navigateur?
InformationsquelleAutor Emeka Obianom
4
```
<input type="text" (keypress)="myMethod(myInput.value)" #myInput />
```
archive .ts
```
myMethod(value:string){
...
...
}
```
- Bienvenue DONC, Ulric, veuillez expliquer comment votre code résout le problème.
InformationsquelleAutor Ulric Merguiço
2

Ce que vous cherchez est
```
<input type="text" [(ngModel)]="mymodel" (keyup)="valuechange()" />
{{mymodel}}
```
Puis faire ce que vous voulez avec les données en accédant à la limite this.mymodel dans votre .ts fichier.

InformationsquelleAutor Sanket Berde
2

Dans mon cas, la solution est:
```
[ngModel]="X?.Y" (ngModelChange)="X.Y=$event"
```
InformationsquelleAutor hatem htira

Vous devez vous connecter pour publier un commentaire.

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

Donc (keyup) est la plus sûre pour aller avec, car il...