Angular2如何通过按Enter键而不是提交按钮提交表单

Question

是否可能通过按下回车键提交没有提交按钮的表单（例如：）

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

- Florence

Answer 1

You can also add (keyup.enter)="xxxx()"

- sizzle

---

如果您只想调用一个普通的函数而不是提交处理程序，那么这非常有效。 - Scott R. Frost

这种方法在 Angular 文档中提到。https://angular.io/docs/ts/latest/guide/user-input.html#!#key-event-filtering-with-key-enter- - trungk18

这是在我的情况下唯一可行的方式，谢谢！ - switch87

这应该是被采纳的答案。Angular独有的优雅方式实现得非常出色。太棒了！ - Scott Byers

Angular文档中的新提及：https://angular.io/guide/user-input#key-event-filtering-with-keyenter - Rafael Neto

Answer 2

或许您可以给文本框添加keypress或keydown事件，并将事件分配给一个函数，当按下enter键时进行提交。

您的模板应该是这样的

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

- Khaled Al-Ansari

Answer 3

编辑：

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

为了使用这个方法，即使它没有显示，“感谢Toolkit's answer”，你需要有一个提交按钮。

旧答案： 是的，就像你写的那样，只是事件名称是(submit)而不是(ngSubmit)：

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

- Abdulrahman Alsoghayer

---

你能提供一个 plunker 吗？因为它不起作用。 - Toolkit

使用 "visibility: hidden;" 代替。 "display:none;" 在谷歌浏览器中可以工作，但在Safari中却不能。 - Moulde

这个应该被使用，除了提交按钮不应该被隐藏而应该是可见的，因为有些人会寻找那个按钮并且不会费心去按回车键。 - Impulse The Fox

Answer 4

我更倾向于使用(keydown.enter)="mySubmit()"，因为如果光标不在<textarea>的结尾处，就不会添加换行符。

- Martin Schneider

---

这应该是被接受的解决方案 - 更加简洁。 - rhysclay

Answer 5

这种方法更加简单...

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

</form>

- Clayton K. N. Passos

---

谢谢，这比我预想的要容易。解决方法如下：<input type="text" class="form-control" [(ngModel)]="object.LanguageTableData" (blur)="mymethod()" (keyup.enter)="mymethod()" /> - Loutocký

这种方式比使用带有$event的函数要简单得多。谢谢！ - Helen

更好的体验。没有隐藏的按钮或js。纯angular方式。 - RenanSS

必须这样做：<form #f="ngForm" (keyup.enter)="appendSigBlock(f.value)"> 使用 Angular 9，但效果很好。 - Jordan

Answer 6

在您的输入标记内添加此内容

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

- Abdus Salam Azad

---

谢谢兄弟。我更喜欢这个选项而不是所选的答案。 - Santosh

Answer 7

(keyup.enter)="methodname()"

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

- Santosh Kadam

Answer 8

始终使用keydown.enter而不是keyup.enter以避免延迟。

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

在组件.ts文件中的and函数

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

- Shamsul

Answer 9

大多数回答建议使用类似以下的东西：

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

</form>

这种方法不会将表单对象标记为已提交。你可能并不在意这一点，但如果你正在使用像@ngspot/ngx-errors（无耻的自我推广）这样的东西来显示验证错误，那么你需要解决这个问题。以下是解决方法：

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

- Dmitry Efimenko

Answer 10

Just simply add (keyup.enter)="yourFunction()"

- Saurabh Agrawal