使用多個按鈕的正確方法

Question

我正在用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()。但它很醜。有沒有乾淨的方法來做到這一點？任何幫助，將不勝感激。非常感謝！

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>