I am facing an issue where, during a slow internet connection, users can press the save button multiple times resulting in saving multiple sets of data. This problem doesn't occur when working locally, but it does happen on our staging environment.
Even though I have already set 'this.hasBeenSubmitted = true;' once the request is complete and disabled the button based on certain conditions, users are still able to click the button multiple times and save data repeatedly, which is incorrect.
Some have suggested that using Angular's rxjs debounce feature could solve this issue. Can someone provide more insight into this solution? How would it help address my problem as shown in the code below? Thank you.
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]="hasBeenSubmitted"
mat-raised-button *ngIf="form" (click)="save()" type="submit">
<ng-container>
<span>SAVE</span>
</ng-container>
</button>