【发布时间】：2016-10-01 08:49:55
【问题描述】：
是否可以提交没有提交按钮的表单（按回车键） 示例：
<form [ngFormModel]="xxx" (ngSubmit)="xxxx()">
<input [(ngModel)]="lxxR" ngControl="xxxxx"/>
</form
【问题讨论】：
【发布时间】：2016-10-01 08:49:55
【问题描述】：
你也可以加(keyup.enter)="xxxx()"
【讨论】：
-
如果你只是想调用一个普通的旧函数而不是提交处理程序，这将非常有用
-
Angular 文档中提到了这种方法。 angular.io/docs/ts/latest/guide/…
-
这是在我的情况下唯一可行的方法，谢谢！
-
这应该是公认的答案。只有 Angular 才能达到的优雅。太棒了。
-
Angular 文档中的新提及：angular.io/guide/user-input#key-event-filtering-with-keyenter
也许您将 keypress 或 keydown 添加到输入字段，并将事件分配给在单击输入时执行提交的函数。
你的模板应该是这样的
<form (keydown)="keyDownFunction($event)">
<input type="text" />
</form
你在你的类中的函数看起来像这样
keyDownFunction(event) {
if (event.keyCode === 13) {
alert('you just pressed the enter key');
// rest of your code
}
}
【讨论】：
编辑：
<form (submit)="submit()" >
<input />
<button type="submit" style="display:none">hidden submit</button>
</form>
要使用此方法，您需要有一个提交按钮，即使它没有显示“Thanks for Toolkit's answer”
旧答案：
是的，和你写的完全一样，除了事件名称是(submit)而不是(ngSubmit)：
<form [ngFormModel]="xxx" (submit)="xxxx()">
<input [(ngModel)]="lxxR" ngControl="xxxxx"/>
</form>
【讨论】：
-
你能提供一个plunker吗？因为它不起作用
-
使用“可见性：隐藏；”反而。 “显示：无；”在 chrome 中工作，但不是在 safari 中工作。
-
这个应该被使用，除了提交按钮不应该被隐藏而是可见，因为有些人会寻找那个按钮并且不会费心按下回车。
我更喜欢(keydown.enter)="mySubmit()"，因为如果光标位于<textarea> 内的某个位置但不在其末尾，则不会添加换行符。
【讨论】：
-
这应该是公认的解决方案 - 更干净
这种方式很简单……
<form [formGroup]="form" (keyup.enter)="yourMethod(form.value)">
</form>
【讨论】：
-
谢谢，比我预期的要容易。像这样解决：
-
这种方式比使用 $event 发送函数要容易得多。谢谢！
-
好多了。没有隐藏的按钮或js。纯角度方式
-
不得不这样做：
在你的输入标签中添加这个
<input type="text" (keyup.enter)="yourMethod()" />
【讨论】：
-
谢谢兄弟。我更喜欢这个选项而不是选定的答案。
始终使用 keydown.enter 而不是 keyup.enter 以避免滞后。
<textarea [(ngModel)]="textValue" (keydown.enter)="sendMessage();false" ></textarea>
和component.ts中的函数
textValue : string = '';
sendMessage() {
console.log(this.textValue);
this.textValue = '';
}
【讨论】：
(keyup.enter)="methodname()"
这应该有效并且已经在许多答案中提到，但是应该出现在表单标签上而不是按钮上。
【讨论】：
只需添加(keyup.enter)="yourFunction()"
【讨论】：
添加一个不可见的提交按钮就可以了
<input type="submit" style="display: none;">
【讨论】：
-
使用“可见性：隐藏；”反而。以上在 chrome 中有效，但在 safari 中无效。
这里的大多数答案建议使用类似的东西：
<form [formGroup]="form" (ngSubmit)="yourMethod()" (keyup.enter)="yourMethod()">
</form>
这种方法不会导致表单对象被标记为submitted。你可能不关心这个，但如果你使用类似@ngspot/ngx-errors（无耻的自我推销）来显示验证错误，你会想要解决这个问题。方法如下：
<form [formGroup]="form" (ngSubmit)="yourMethod()" (keyup.enter)="submitBtn.click()">
<button #submitBtn>Submit</button>
</form>
【讨论】：
希望这可以帮助某人：由于某种原因，由于时间不足，我无法跟踪，如果您有这样的表格：
<form (ngSubmit)="doSubmit($event)">
<button (click)="clearForm()">Clear</button>
<button type="submit">Submit</button>
</form>
当您点击Enter 按钮时，会调用clearForm 函数，即使预期的行为是调用doSubmit 函数。
将Clear 按钮更改为<a> 标签为我解决了这个问题。
我仍然想知道这是否是预期的。让我感到困惑
【讨论】：
-
为了避免这种情况，您已经为清除按钮指定了 type="button"
如果您想包含 both 比我在此处看到的更简单，只需将按钮包含在表单中即可。
发送消息的函数示例：
<form>
<mat-form-field> <!-- In my case I'm using material design -->
<input matInput #message maxlength="256" placeholder="Message">
</mat-form-field>
<button (click)="addMessage(message.value)">Send message
</button>
</form>
您可以选择点击按钮或按回车键。
【讨论】：
-
不得不将它与@Clayton K. N. Passos 的答案结合使用，效果很好！
如果您想同时包含两者 - 输入时接受并点击时接受 -
<div class="form-group">
<input class="form-control" type="text"
name="search" placeholder="Enter Search Text"
[(ngModel)]="filterdata"
(keyup.enter)="searchByText(filterdata)">
<button type="submit"
(click)="searchByText(filterdata)" >
</div>
【讨论】：
嗯，这里有一个小警告，我想说。如果您想提交表单，除非您单击表单上的任意位置或特别是在输入字段上，否则上述方法均无效。
如果你想直接按回车而不点击任何地方来提交表单，你需要在 html 中全局声明它：
<button (window:keypress)="onSomeAction($event)">
在 TS 文件中：
onSomeAction(event){
if(event.keyCode===13){
//submit form
}
}
或
<button (window:keypress.enter)="onSomeAction($event)">
【讨论】：