web-dev-qa-db-fra.com

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

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 aucun 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)

angular
32
Koen De Couck

(keyup.enter)="methodInsideYourComponent()" ajouter ceci dans votre tag d'entrée

92
Godfather

Vous pouvez placer cette zone de texte dans une balise de formulaire et définir un événement ngSubmit sur le formulaire i.e.

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

En HTML normal, vous avez besoin de <button type="submit" ></button> ou <input type="submit" /> pour soumettre le formulaire lorsque vous appuyez sur Entrée. Ces éléments peuvent être cachés par css mais doivent être présents dans le formulaire. ng-submit doit être lié à l'événement onsubmit normal et les mêmes conditions doivent être déclenchées.

De plus, à partir du code que vous avez posté, vous n'avez aucun élément de formulaire, mais seulement le champ de saisie. La directive ng-submit ne fonctionne qu'avec les formulaires, car les éléments d'entrée n'ont pas d'événement JS onsubmit.

1
Dimitri L.

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

<form (keydown)="keyDownFunction($event)"><input type="text" /></form>
0
Koen De Couck