web-dev-qa-db-fra.com

Récupère la valeur dans enter keypress event in angular material

En essayant de créer une entrée avec un bouton clair en suivant l'exemple de Angular Material , lien vers l'exemple , ce que je veux, c'est obtenir la valeur d'entrée sur un événement d'entrée de pression de touche.

HTML:

<mat-form-field>
  <input matInput (keydown.enter)="applyFilter($event)" placeholder="Search" 
   name="search" [(ngModel)]="searchValue">
  <button mat-icon-button matSuffix aria-label="Clear" (click)="clearSearch()">
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

TS:

  applyFilter(event: any) {
      console.log(JSON.stringify(event)); 
  }

Résultats de la console lors de l'impression du contenu de l'événement:

{"isTrusted":true}
angulareventsangular-materialmat
6
ketimaBU

Je ne suis pas familier avec ce scénario spécifique du composant de Material Design, mais les suggestions dans les commentaires sont la manière traditionnelle de le faire.
Il peut y avoir une interruption du composant MD avec l'événement, vous pouvez donc essayer de transmettre manuellement la valeur à la fonction. quelque chose comme ça:

<mat-form-field>
  <input matInput #txtVal (keydown.enter)="applyFilter(txtVal.value)" placeholder="Search" 
   name="search" [(ngModel)]="searchValue">
  <button mat-icon-button matSuffix aria-label="Clear" (click)="clearSearch()">
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

TS:

applyFilter(val: string) {
 console.log(val); 
}

#txtVal n'est qu'une variable locale dans le champ de saisie, nous transmettons donc sa valeur manuellement à la fonction.

1
dAxx_

Vous devez simplement obtenir la valeur en utilisant event.target.value dans votre applyFilter() méthode.

applyFilter(event: any) {
  console.log(event.target.value); 
}

Lien vers Démo StackBlitz .

1
Faisal