Question

我正在使用angular forms构建一个from，它可以很好地使用1个按钮。但是当我想要2个按钮时，它很难处理。

我想要一个按钮reset和一个按钮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按钮之前添加隐藏按钮并在event.stopPropagation(); event.preventDefault()功能中调用reset()。但它很难看。有干净的方法吗？任何帮助，将不胜感激。非常感谢！

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>

以角度形式使用多个按钮的正确方法

1 个答案: