Dans Angular 2, comment puis-je soumettre une valeur type = "text" en appuyant sur Entrée?

Question

Je construis une boîte de recherche dans mon application Angular 2, j'essaie de soumettre la valeur en appuyant sur 'Entrée' (le formulaire n'inclut pas de bouton).

Modèle

 <input type="text" id="search" class="form-control search-input" name="search" placeholder="Search..." [(ngModel)]="query" (ngSubmit)="this.onSubmit(query)">
 

Avec une simple fonction onSubmit à des fins de test ...

 export class HeaderComponent implements OnInit {
  constructor() {}

  onSubmit(value: string): void {
    alert('Submitted value: ' + value);
  }
}
 

ngSubmit ne semble pas fonctionner dans ce cas. Alors, quel est le «moyen angulaire 2» pour résoudre ce problème? (De préférence sans hacks comme des boutons cachés)

Answer 1

(keyup.enter)="methodInsideYourComponent()" ajoute dans votre balise input

Answer 2

Vous pouvez placer cette zone de texte dans une balise de formulaire et définir un événement ngSubmit sur le formulaire, par exemple

 <form (ngSubmit)="YouMethod()">
    <input type="text" class="form-control input-lg" />
</form>
 

Answer 3

En HTML normal vous avez besoin d'un <button type="submit" ></button> ou <input type="submit" /> de soumettre le formulaire en appuyant sur entrée. Ces éléments peuvent être cachés par le css mais doit être présent à l'intérieur de la forme. ng-submit doit être liée à la normale onsubmit événement et il a les mêmes conditions pour être déclenché.

Aussi à partir du code que vous avez posté, vous n'avez pas d'élément de formulaire, mais seulement le champ de saisie, et l' ng-submit directive ne fonctionne qu'avec des formes car les entrées des éléments ont pas d' onsubmit JS événement.

Answer 4

Par souci d'exhaustivité, cette solution a également fonctionné pour moi:

 <form (keydown)="keyDownFunction($event)"><input type="text" /></form>