Angular 2では、Enterキーを押したときに入力タイプ= "テキスト"値を提出するにはどうすればよいですか？

Angular 2アプリで検索ボックスを作成して、 'Enter'（フォームにボタンが含まれていない）を押すと値を送信しようとしています。テスト目的のために簡単なのonSubmit機能付きAngular 2では、Enterキーを押したときに入力タイプ= "テキスト"値を提出するにはどうすればよいですか？

テンプレート

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

...

export class HeaderComponent implements OnInit { 
    constructor() {} 

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

ngSubmitは、この場合には動作するようには思えません。これを解決するための「角度2ウェイ」は何ですか？（隠されたボタンのようなハック好ましくはなし）

出典

2016-07-29 Koen De Couck

(keyup.enter)="methodInsideYourComponent()"は通常のHTMLでは、あなたのinputタグ

出典

2016-07-29 12:32:50 Godfather

ニースを！私はそれを ''でラップして動作させていましたが、あなたの方法ははるかに簡潔で簡潔です！ –

ニート。ありがとうございます – user2180794

これは[Angular Docs]（https://angular.io/docs/ts/latest/guide/user-input.html#!#key-event-filtering-with-key-enter-）にも記載されています。 –

の内側にこれを追加しますEnterキーを押したときにフォームを送信するために<button type="submit" ></button>または<input type="submit" />必要です。これらの要素はCSSで隠すことができますが、フォーム内に存在する必要があります。 ng-submitは通常のonsubmitイベントにバインドされ、トリガーされる条件は同じです。

また、入力要素にはonsubmit JSイベントがないため、フォーム要素はなく入力フィールドのみがあり、ng-submit指示文はフォームでのみ機能します。

出典

2016-07-29 12:34:07

あなたは完全を期すために、すなわち

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

出典

2016-07-29 13:08:50 Naveen

をformタグの内側に、このテキストボックスを配置し、フォーム上のngSubmitプロパティを設定することができ、この解決策は、同様に私の仕事：

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

出典

2016-11-18 15:08:07

Angular 2では、Enterキーを押したときに入力タイプ= "テキスト"値を提出するにはどうすればよいですか？

答えて

関連する問題