Angular 2阻止输入以模板驱动的形式提交

Question

我有使用模板驱动蓝图的表单，所以像这样：

<form #myForm="ngForm" ngSubmit="save(myForm.value, myForm.isValid)">
  <input #name="ngModel" [(ngModel)]="name">
  <button type="submit">Submit form</button>
</form>

现在，我如何阻止ENTER提交表单？它会干扰表单内部的自定义ENTER行为，如果您不小心在输入中按Enter键，这是不需要的。

我环顾四周，找到了一些古老的Angular 1答案，还有一些标准的JavaScript答案，但我觉得Angular 2必须有这样的东西已经内置，但我还是找不到它。

如果他们不这样做，最好的方法是什么？

Answer 1

事实证明，你可以使用如下简单的东西：

<form (keydown.enter)="$event.preventDefault()"></form>

防止表单在ENTER上提交。

Answer 2

要允许输入键在textareas中工作但阻止提交表单，您可以修改如下：

在HTML模板中：

<form (keydown.enter)="handleEnterKeyPress($event)">...</form>

在.ts代码后面的组件类中：

handleEnterKeyPress(event) {
    const tagName = event.target.tagName.toLowerCase();
    if (tagName !== 'textarea') {
      return false;
    }
  }

Answer 3

我知道我迟到了，但可能是我得到了适当的解决方案，

如果你正在使用<button>那么只需定义

<button type="button">

而不是定义它或将其定义为type =“submit”，因为如果你不定义它，它将提交你的表格。

如果您使用<input>然后也定义相同

<input type="button"> 

这将有效。

- 编辑为@Chrillewoodz评论。

如果您希望在提交/单击时执行某些特定过程您可以将click事件添加到按钮，并且您可以随意执行任何操作。

如果你想在角度ts文件中使用Form标签，那么你可以使用@ViewChild。

Answer 4

有同样的问题，这对我有所帮助：

<button type="submit" [disabled]="!myForm.valid">Save</button>