在 angular 表单中使用多个按钮的正确方法

Question

我正在用 angular forms 构建一个 from 并且它与 1 个按钮一起工作。但是当我想要 2 个按钮时，很难处理。

我想要 1 个按钮 reset 和 1 个按钮 submit。 reset 必须放在 submit 之前。这是模板：

<form (ngSubmit)="submit()" [formGroup]="form">
    //inputs...
    <button type="submit" (click)="reset($event)">reset</button>
    <button type="submit">submit</button>
</form>

当我在一个输入中按下 enter 时，form 会触发 submit() 和 reset($event) 函数。当我点击 reset 按钮时是一样的。我的期望是：

当按下 enter 或点击 submit 按钮时，表单仅触发 submit() 功能
当单击 reset 按钮时，表单仅触发 reset() 函数

我发现在 reset 按钮之前添加一个隐藏按钮并在 reset() 函数中调用 event.stopPropagation(); event.preventDefault()。但它很丑。有干净的方法吗？任何帮助，将不胜感激。非常感谢！

Answer 1

您必须将重置按钮的 type 设置为 button，而不是 submit。您必须明确设置它，因为属性 type 的默认值是 submit:

<form (ngSubmit)="submit()" [formGroup]="form">
    //inputs...
    <button type="button" (click)="reset($event)">reset</button>
    <button type="submit">submit</button>
</form>

在 angular 表单中使用多个按钮的正确方法

Right way to use multiple buttons in angular form

angular

angular-forms