Angular2通过按回车键提交表单而不需要提交按钮

也许您将 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>

为了使用这个方法，你需要有一个提交按钮，即使它没有显示“感谢 工具箱的回答”

老答案:

是的，和你写的一模一样，只不过事件名是 (submit)而不是 (ngSubmit):

<form [ngFormModel]="xxx" (submit)="xxxx()">
<input [(ngModel)]="lxxR"   ngControl="xxxxx"/>
</form>

还可以添加 (keyup.enter)="xxxx()"

这个方法很简单。

<form [formGroup]="form" (keyup.enter)="yourMethod(form.value)">


</form>

添加一个不可见的提交按钮就可以解决这个问题

<input type="submit" style="display: none;">

我更喜欢 (keydown.enter)="mySubmit()"，因为如果光标位于 <textarea>中的某个位置，但不在其末尾，则不会添加换行符。

希望这能帮到某些人: 由于某些原因，我无法跟踪，因为缺乏时间，如果你有一个表单，如:

<form (ngSubmit)="doSubmit($event)">
<button (click)="clearForm()">Clear</button>
<button type="submit">Submit</button>
</form>

当您按下 Enter按钮时，将调用 clearForm函数，尽管预期的行为是调用 doSubmit函数。 将 Clear按钮改为 <a>标记为我解决了这个问题。 我还是想知道这是不是意料之中的，我觉得很困惑

只要简单地添加 (keyup.enter)="yourFunction()"

如果你想包括两者-接受在进入和接受在点击然后做-

 <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>

始终使用 keydown.enter 而不是 keyup.enter 来避免滞后。

<textarea [(ngModel)]="textValue" (keydown.enter)="sendMessage();false" ></textarea>

并在组件中起作用

 textValue : string = '';
sendMessage() {
console.log(this.textValue);
this.textValue = '';
}

如果你想包括 都有比我在这里看到的更简单，你可以只包括你的内部形式按钮。

例如，函数发送一条消息:

                <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>

您可以在单击按钮或按回车键之间进行选择。

在你的输入标签中添加这个

<input type="text" (keyup.enter)="yourMethod()" />

(keyup.enter)="methodname()"

这应该工作，并已在许多答案中提到，但这应该是在形式标签上，而不是在按钮上。

这里的大多数答案建议使用以下内容:

<form [formGroup]="form" (ngSubmit)="yourMethod()" (keyup.enter)="yourMethod()">


</form>

此方法不会导致将 form 对象标记为 submitted。您可能不关心这个，但是如果您正在使用类似 @ ngspot/ngx-error(无耻的自我推销)的东西来显示验证错误，那么您需要修复它。方法如下:

<form [formGroup]="form" (ngSubmit)="yourMethod()" (keyup.enter)="submitBtn.click()">
<button #submitBtn>Submit</button>
</form>

我觉得这里有个 小小的警告。如果您想提交表单，除非您单击表单上的任何地方或特定的输入字段，否则上述方法都不起作用。

如果你想提交表单，只需点击回车键，不需要点击任何地方，你需要在 html 中全局声明它:

<button (window:keypress)="onSomeAction($event)">

以及 TS 档案:

onSomeAction(event){
if(event.keyCode===13){
//submit form
}

}

或者

<button (window:keypress.enter)="onSomeAction($event)">

<form [ngFormModel]="xxx" (keyup.enter)="xxxx()" (ngSubmit)="xxxx()">
<input [(ngModel)]="lxxR"   ngControl="xxxxx"/>
</form>