appel dupliquée à fonctionner dans le bouton Angular4

Question

Donc, j'ai une zone d'entrée angulaire comme ceci:

<div class="form-group row"> 
     <div class="col-md-10"> 
      <pre class="card card-block card-header">Search Publication by id: {{id}}</pre> 
      <input type="text" 
        class="form-control" 
        ngui-auto-complete 
        [(ngModel)]="id" 
        [source]="publications" 
        value-formatter="id, title" 
        list-formatter="id, title" 
        /> 
      <button class="btn btn-primary" (keyup.enter)="search(id.id)" (click)="search(id.id)">Search Publication</button> 
     </div> 
    </div> 

L'idée est de donner à l'utilisateur la possibilité de faire appel à la fonction de recherche via le clavier ou la souris.

Le problème que je trouve est que l'appel est dupliqué, il appelle une fois pour le keyup.enter et encore pour le clic

est-il un moyen facile d'éviter ce qui ne signifie pas des directives sur mesure?

Answer 1

Dans une forme Entrez provoque le bouton pour déclencher l'événement clic de toute façon, donc tout en ajoutant le gestionnaire de clic devrait faire

<button class="btn btn-primary" (click)="search(id.id)">Search Publication</button> 

Answer 2

Le comportement du navigateur par défaut est de dupliquer votre événement: l'événement de clic est déclenché automatiquement lorsque vous appuyez sur Entrée (lorsque la saisie de texte est active).

Cela devrait fonctionner si vous supprimez l'événement (keyup.enter) de votre bouton - ou vous pouvez ignorer le navigateur et ajouter cet événement dans le champ de saisie, plutôt que sur le bouton.

Answer 3

La manière la plus simple et la plus propre de le faire est de créer une forme réelle qui répondra au clic du bouton et à la pression de la touche "Entrée".

<form class="form-group" (ngSubmit)="search('test')"> 
    <div class="row"> 
    <div class="col-md-12"> 
     <div> 
     <input type="text" class="form-control"/> 
     <button class="btn btn-primary" 
       type="submit"> 
      Search Publication 
     </button> 
     </div> 
    </div> 
    </div> 
</form> 

La méthode que vous voulez appeler est dans le précisé (ngSubmit). Le bouton doit de type "soumettre".

Answer 4

Vous devez arrêter la propagation d'événement après avoir appuyé sur Entrée. Changez votre code pour utiliser au lieu de (keyup.enter) et ajoutez $event.preventDefault(); après la méthode.

<button class="btn btn-primary" 
     (keydown.enter)="search(id.id); $event.preventDefault();" 
     (click)="search(id.id)">Search Publication</button> 

Lien vers working demo.