How to prevent user from submitting form multiple times ? in angular

Question

Now I have a feature where user can create new data and save it , if the data is existing a modal will pop up like

Now after the user clicks the save button it will be submitted and while the request is still pending or loading there is a tendency that the user will click again on the button and the "Data already exists wanna proceed on saving?" will pop up again which I dont want to.

So as you can see on the screenshot below, the request is still pending and loading so if user clicks that again that pop up will again show . How do we solve that using angular ? Any good idea that might help ? Thanks.

#Save data snippet

listenToSaveEvent(): void {
    this.saveSubject
      .asObservable()
      .pipe(
        filter((v) => !!v),
        debounceTime(1e3)
      )
      .subscribe(() => {
 
        if (this.respondents.length === 1) {
          return this.checkExistingData();

#CODE THAT CHECKS EXISTING DATA

checkExistingData(): void {
    const test = this.formService.checkExisting(this.form)
    .subscribe(res => {
      if (res ) {
        const createExistingSub = this.confirmDialogService.open(
          ERROR_MESSAGES."Data already exists wanna proceed on saving?"
        )
          .componentInstance
          .confirmed
          .subscribe((confirmed) => {
            if (confirmed) {
              return this.createDATA();
            }

            createExistingSub.unsubscribe();
      });
      } else {
          return this.createDATA();
      }
  });

you can disable to button on click and enable back inside subscribe of api. — Aakash Garg
– Aakash Garg, Commented Jun 21, 2020 at 17:25
simple solution: disable button or make it disappear when you press it. done. — Rick
– Rick, Commented Jun 21, 2020 at 19:57

VladislavChudak · Accepted Answer · 2020-06-21 17:26:57Z

2

You might want to disable your button while processing the request and\or put a loader on it. That way the user will see its still processing and you wont have that problem anymore, better from User Experience perspective.

answered Jun 21, 2020 at 17:26

VladislavChudak

365 bronze badges

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

Comments

Oleksandr K · Accepted Answer · 2020-06-21 19:44:54Z

1

Add some flag that will switch before and after upload

`listenToSaveEvent(): void {
    if (this.isUploading) { return;}  // do nothing while uploading
    this.isUploading = true;
    this.saveSubject
      .asObservable()
      .pipe(
        filter((v) => !!v),
        debounceTime(1e3),
        finally(() => this.isUploading === false)   // no matter if it's success or error
      )
      .subscribe(() => {
 
        if (this.respondents.length === 1) {
          return this.checkExistingData();`

answered Jun 21, 2020 at 19:44

Oleksandr K

3574 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to prevent user from submitting form multiple times ? in angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related