在Angular 2中，如何在輸入時提交input type =「text」的值？

我在我的Angular 2應用程序中構建了一個搜索框，試圖在按'Enter'（表單不包含按鈕）時提交該值。在Angular 2中，如何在輸入時提交input type =「text」的值？

模板

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

隨着用於測試目的的簡單的onsubmit功能...

export class HeaderComponent implements OnInit { 
    constructor() {} 

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

ngSubmit似乎並沒有在這種情況下工作。那麼解決這個問題的'Angular 2 way'是什麼？（最好不喜歡隱藏按鈕黑客）

來源

2016-07-29 Koen De Couck

(keyup.enter)="methodInsideYourComponent()"添加此您輸入的標籤

來源

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-）。 –

在普通的HTML中你需要一個<button type="submit" ></button>或<input type="submit" />按輸入時提交表單。這些元素可以被CSS隱藏，但必須存在於表單中。 ng-submit應該綁定到正常的onsubmit事件，並且它具有相同的觸發條件。

同樣來自您發佈的代碼，您沒有表單元素，但只有輸入字段，並且ng-submit指令僅適用於表單，因爲輸入元素沒有onsubmit JS事件。

來源

2016-07-29 12:34:07

你可以把這個文本框的形式標記，並設置ngSubmit屬性裏面的形式，即

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

來源

2016-07-29 13:08:50 Naveen

爲了完整起見，該解決方案爲我工作，以及：

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

來源

2016-11-18 15:08:07

在Angular 2中，如何在輸入時提交input type =「text」的值？

回答

相關問題