使用多个按钮的正确方法

问题描述：

我正在用angular forms来构建一个，它可以很好地使用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()。但它很丑。有没有干净的方法来做到这一点？任何帮助，将不胜感激。非常感谢！

只是删除'型=从复位按钮“提交”'..... – Claies

@Claies：我尝试过，但相同的行为 – Duannx

答

您必须将您的重置按钮的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>

使用多个按钮的正确方法

相关推荐