angular2通过按Enter键提交表单而不提交按钮

Question

是否可以提交没有提交按钮的表单(按Enter键)示例:

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

Answer 1

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

Answer 2

编辑:

  <form (submit)="submit()" >
    <input />
    <button type="submit" style="display:none">hidden submit</button>
  </form>

为了使用这种方法,你需要有一个提交按钮,即使它没有显示"感谢Toolkit的回答 "

旧答案:

是的,正如您所写的那样,除了事件名称(submit)而不是(ngSubmit):

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

Answer 3

也许您添加keypress或keydown输入字段并将事件分配给将在单击输入时执行提交的功能

你的模板看起来像这样

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

而你在班级里面的功能看起来就像这样

keyDownFunction(event) {
  if(event.keyCode == 13) {
    alert('you just clicked enter');
    // rest of your code
  }
}

Answer 4

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

Answer 5

这种方式很简单......

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

</form>

Answer 6

(keyup.enter)="methodname()"

这应该有效并且已经在许多答案中提到过，但是它应该出现在表单标签上而不是按钮上。

Answer 7

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

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

和component.ts中的函数

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

Answer 8

添加一个不可见的提交按钮就可以了

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

Answer 9

只需添加即可 (keyup.enter)="yourFunction()"

Answer 10

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

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

Answer 11

将此添加到您的输入标签中

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