W Angular 2, jak przesłać wartość typu wejściowego = "tekst" po naciśnięciu klawisza Enter?

Question

Buduję pole wyszukiwania w mojej aplikacji Angular 2, próbuję przesłać wartość po naciśnięciu klawisza "Enter" (formularz nie zawiera przycisku).

Szablon

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

Z prostym onSubmit funkcji dla celów testowych ...

export class HeaderComponent implements OnInit { 
    constructor() {} 

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

ngSubmit nie wydają się działać w tej sprawie. Więc jaki jest "Angular 2 way", aby rozwiązać ten problem? (Najlepiej bez hacki jak ukryte guziki)

Answer 1

(keyup.enter)="methodInsideYourComponent()" dodać ten wewnątrz tagu wejściowego

Answer 2

w normalnym HTML trzeba <button type="submit" ></button> lub <input type="submit" /> przesłać formularz po naciśnięciu Enter. Te elementy mogą być ukryte przez css, ale muszą być obecne w formularzu. ng-submit powinien być powiązany z normalnym zdarzeniem onsubmit i ma takie same warunki, które mają być wyzwalane.

Również z kodu, który napisałeś, nie masz elementu formularza, ale tylko pole wejściowe, a dyrektywa ng-submit działa tylko z formularzami, ponieważ elementy wejściowe nie mają zdarzenia JS onsubmit.

Answer 3

można umieścić pola tekstowego wewnątrz tagu formularza i ustawić właściwość ngSubmit na formularzu tj

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

Answer 4

Dla kompletności, to rozwiązanie pracował dla mnie, a także:

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