angular prevent user multiple submit

Question

Sometimes user click the save button multiple times and it queues and submit a lot of request and multiple data are created.

How do we prevent it on the front-end that even user click the button multiple times only one request is submitted , anyone knows a clean implementation ? what are the techniques ?

Thanks.

#html code

 <ng-template #editButtons>
      <div class="flex" *ngIf="isEditing">
        <app-page-section-cards-btn
          [btnData]="pageSectionsOptions.btnData.cancel"
          (btnClickEvent)="cancelEdit()"></app-page-section-cards-btn>
        <app-page-section-cards-btn
          [btnData]="pageSectionsOptions.btnData.save"
          (btnClickEvent)="saveDeal()">
      </app-page-section-cards-btn>
      </div>
    </ng-template>

ts code

saveDeal(){
    const payload = {
      "id": 0,
      "name": this.dealDispositionFormFields.dealName,
      "dealType": "Idle Buyout",
      "annualRentProposed": null,
      "annualRentCurrent": null,
      "firmTermRemaining": null,
      "firmTermAdded": null,
      "maxAvailableTerm": null,
      "status": null,
      "capitalContribution": null,
      "parentCloneId": null,
      "accountId": this.currentAccount.accountId,
      "transactionId": this.transactionData.id,
      "dealTypeValues": JSON.stringify(dealTypeValues)
    }
    this.createDispositionDeal(payload);

  }

    createDispositionDeal(payload:any) {
      this._dealService.createDeal(payload)
      .subscribe(
        res=>{
          this._notificationService.showSuccess('Deal was successfully created.');
          if(res.isSuccess){
            this.refreshDealDetailsPage(res.data);
          }  
        },
        err=>{
          console.log('Error creating deal')
        }
      )
    }

disable the button in saveDeal and maybe reenable after request returns? — Suraj Rao
– Suraj Rao, Commented Oct 17, 2021 at 8:11

Fateh Mohamed · Accepted Answer · 2021-10-17 10:39:26Z

2

there is a perfect solution using rxjs exhaustMap but You can simply disable your button during the processing of your call and enable it again when the reponse comes

isLoading = false;

saveDeal() {
 this.isLoading = true;
 ...
}


createDispositionDeal(payload:any) {
  this._dealService.createDeal(payload)
  .subscribe(
    res=>{
      this.isLoading = false; // here
      ...
    },
    err=>{
      this.isLoading = false; // here
      ...
    }
  )
}

and add a new input to your component [disabled]="isLoading"

 <app-page-section-cards-btn
      [disabled]="isLoading"
      [btnData]="pageSectionsOptions.btnData.save"
      (btnClickEvent)="saveDeal()">
  </app-page-section-cards-btn>

edited Oct 17, 2021 at 10:39

answered Oct 17, 2021 at 10:33

Fateh Mohamed

21.5k5 gold badges46 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Martin Lautz Over a year ago

how do I disable the <app-page-section-cards-btn when this is a child component

Fateh Mohamed Over a year ago

you can create an @input disabled and get it's value in your child component

Martin Lautz Over a year ago

imgur.com/a/nBEfR9z this is my app-page-section-cards-btn component

Fateh Mohamed Over a year ago

if you add an input with the name disabled so it comes [disabled]="disabled" inside your child component

Martin Lautz Over a year ago

Sir , do you have an exhaustMap implementation ?

|

Collectives™ on Stack Overflow

angular prevent user multiple submit

ts code

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

ts code

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related