angular - 当我按下回车键时，Angular 表单中的按钮被“点击”

Question

我的 Angular 表单有一个奇怪的问题。我有一个简单的表格，如下所示：

<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      <button (click)="addUser()">Add a user</button>

      <input name="first" ngModel required #first="ngModel">
      <input name="last" ngModel>

      <button>Submit</button>
</form>

问题是当我ENTER在表单中按下时，而不是提交，它会触发函数addUser()，这不是我想要的。

如何阻止它“点击”ADD A USER和射击addUser()？

Answer 1

解决方案是简单地将带有值的 type 属性添加button到第一个按钮。

浏览器type="submit"默认分配给所有按钮。

只需要改变

<button (click)="addUser()">Add a user</button>

至

<button (click)="addUser()" type="button">Add a user</button>