In a ngForm every time clicking an action button causes submitting the form

Question

I have a ngForm, which has multiple buttons, besides the one for submitting the form, each of others has diff action, e.g., simply changing status used for *ngIf condition check. However, every time I click Create or Upload button, the form was actually submitted one more and thus a new record was created in the database.

I tried changing click to onClick by following some other answers here but the issue remains. Please help me out by referring below code.

<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

This is strange, try removing the (submit) event handler on the form element.

<form #adsForm="ngForm">

and remove the type="submit" from this button and add the (click) event handler to it:

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

OR

You could try explicitly adding type="button" to all other buttons.

<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>