I have a form with multiple buttons in my ngForm. Each button has a different action, such as changing the status used for *ngIf condition check. However, every time I click the Create or Upload button, the form is submitted again and a new record is created in the database.
I have tried changing the click event to onClick as suggested in other answers, but the issue persists. Can someone please help me by reviewing the code below?
<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;
}