Can someone provide guidance on using rxjs finalized in angular to prevent users from clicking the save button multiple times and sending multiple requests?
When a button click triggers a call in our form, some users still tend to double-click, leading to duplicate calls being sent to our backend API. How can we avoid this scenario?
Below is my current code implementation. Any assistance is greatly appreciated.
Code
save(): void {
const create = this.requestFormService.createRequestData(this.form, this.respondents)
.subscribe(
(results: FeedbackRequest[]) => {
this.hasBeenSubmitted = true;
},
(error) => {
this.hasBeenSubmitted = false;
this.handleInvalidFields(error, 'Failed to save the Feedback Request as draft. One or more fields contain invalid values. Input a valid value to proceed.');
this.messageDialogService.show('Failed to save the Feedback Request as draft. One or more fields contain invalid values. Input a valid value to proceed.', true);
create.unsubscribe();
}
);
}
HTML
<button [disabled]="form.invalid || (!duplicateMode && !form.dirty) || (!editMode) || hasBeenSubmitted"
mat-raised-button *ngIf="form" (click)="save()" type="submit">
<ng-container>
<span>SAVE</span>
</ng-container>
</button>