在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”的值？

回答

相关问题