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

【问题标题】：Button in Angular form being "clicked" when I press enter当我按下回车键时，Angular 表单中的按钮被“点击”
【发布时间】：2019-01-11 16:49:32
【问题描述】：

我的 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()？

【问题讨论】：

标签： angular forms angular-reactive-forms htmlbutton

【解决方案1】：

解决方案只是将值为button 的类型属性添加到第一个按钮。

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

只需要改变

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

到

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

【讨论】：