在ngForm中，每次单击操作按钮都会导致提交表单

Question

我有一个ngForm，它有多个按钮，除了一个用于提交表单的按钮外，每个按钮都有不同的操作，例如，简单地更改用于*ngIf条件检查的状态。然而，每次我单击"创建"或"上载"按钮时，表单实际上又被提交了一次，因此在数据库中创建了一个新记录。

我试图通过在这里遵循其他一些答案将click更改为onClick，但问题仍然存在。请参考以下代码帮助我。

<form #adsForm="ngForm" (submit)="onSubmit()">
<table  class="table createAds text-center">
<thead>
......
</thead>
<tbody>
<tr class="border_bottom">
<td class="align-middle"><span style="color: red;">inactive</span></td>
......
<td class="align-middle" *ngIf="!paying && !created">
<button [disabled]="months === undefined" 
class="btn btn-outline-primary" type="submit">Create
</button>
</td> 
<td class="align-middle" *ngIf="created">
<button [disabled]="imageCount == 0" class="btn btn-outline-primary" (click)="confirmToPay()">Pay
</button>
</td>          
<td class="align-middle" *ngIf="!paying && !created">
<button class="btn btn-outline-primary" (click)="onCancel()">Cancel</button>
</td> 
<td class="align-middle" *ngIf="created">
<button class="btn btn-outline-primary" (click)="onUpload()">Upload</button>
</td>          
</tr>
</tbody>
</table>
</form>

onSubmit() {   
let data = new AdsToCreate();
......   
this.memberService.createAds(data).subscribe(resp => {
this.getUserAds();  
this.created = true; 
}, error => {
console.log(error);
});  
}

confirmToPay() {
this.confirming = true;    
}

onCancel() {
this.requesting = true;
this.paying = false;
this.checking = false;
this.created = false;    
}

onUpload() {
this.uploading = true;
}

Answer 1

这很奇怪，请尝试删除form元素上的(submit)事件处理程序。

<form #adsForm="ngForm">

从该按钮中删除type="submit"，并向其添加(click)事件处理程序：

<button [disabled]="months === undefined" 
class="btn btn-outline-primary" (click)="onSubmit()">Create
</button>

或

您可以尝试将type="button"显式添加到所有其他按钮中。

<form #adsForm="ngForm" (submit)="onSubmit()">
<table  class="table createAds text-center">
<thead>
......
</thead>
<tbody>
<tr class="border_bottom">
<td class="align-middle"><span style="color: red;">inactive</span></td>
......
<td class="align-middle" *ngIf="!paying && !created">
<button [disabled]="months === undefined" 
class="btn btn-outline-primary" type="submit">Create
</button>
</td> 
<td class="align-middle" *ngIf="created">
<button type="button" [disabled]="imageCount == 0" class="btn btn-outline-primary" (click)="confirmToPay()">Pay
</button>
</td>          
<td class="align-middle" *ngIf="!paying && !created">
<button type="button" class="btn btn-outline-primary" (click)="onCancel()">Cancel</button>
</td> 
<td class="align-middle" *ngIf="created">
<button type="button" class="btn btn-outline-primary" (click)="onUpload()">Upload</button>
</td>          
</tr>
</tbody>
</table>
</form>