How to avoid multiple submit clicks on an angular form

Question

`Hi, I'm new to this angular stuff and do not quite understand how to do this part of the form.
We have had people click the submit button multiple times very quickly and add the same information just as many times before it can even send the information to the API.

I've tried searching on here and even googled it but I feel like our forms are very specific and could not find anything that seemed even close.

Here is what I have and any suggestions would be really helpful:

onSubmit(model: ExampleDto) {
  if (!this.form.disabled) {
    if (this.form.valid) {
      if (this.form.dirty) {
        if (this.mode === this.modes.Add) {
          delete model["CompanyName"];
          delete model["EffectiveDate"];
          delete model["ExpirationDate"];
          delete model["CancelDate"];
          model.UserCreated = localStorage.getItem("name");
          this.userService.AddExample(model).subscribe(
            (data) => {
              if (data) {
                if (data.Status == "Success") {
                  if (data.Example.CExampleid.trim() == "") {
                    this.onRowSelect({ data: data.Claim });
                  } else {
                    this.searchCriteria.setValue({
                      policyNumber: data.Example.PolicyNumber,
                      claimNumber: data.Example.ClaimNumber,
                      dateOfLoss: data.Example.DateOfLoss,
                    });
                    this.onSearch();
                  }
                } else {
                  this.confirmationService.confirm({
                    key: "error-message",
                    message:
                      "The example was NOT created. You may try again after clicking OK. If the problem persists, contact the Helpdesk.",
                    accept: () => {},
                  });
                }
              }
            },
            (err) => {
              this.confirmationService.confirm({
                key: "error-message",
                message:
                  "The example was NOT created. You may try again after clicking OK. If the problem persists, contact the Helpdesk.",
                accept: () => {},
              });
            },
            () => {}
          );
        }
      } else {
        this.confirmationService.confirm({
          key: "notice",
          message: "You haven't made any changes to the example.",
          accept: () => {},
        });
      }
    } else {
      this.confirmationService.confirm({
        key: "error-message",
        message:
          "There are errors on the form. Click OK to make corrections before resubmitting.",
        accept: () => {},
      });
    }
  }
}

Answer 1

You should simply add a property isSubmitted = false inside the component class.

You should do a check before submitting if (!this.isSubmitted).

Set it to true before you call the service and back to false after the response is returned.

You called also disable the button like this <button type="submit" [disabled]="submitted">Click me</button>.

// Inside your component class
isSubmitted = false;

onSubmit(model: ClaimDto) {
  if (!this.isSubmitted) {
    this.isSubmitted = true; // Set to true to indicate submission in progress
    if (this.form.valid && this.form.dirty && this.mode === this.modes.Add) {
      delete model["CompanyName"];
      delete model["EffectiveDate"];
      delete model["ExpirationDate"];
      delete model["CancelDate"];
      model.UserCreated = localStorage.getItem("name");
      this.userService.AddClaim(model).subscribe(
        (data) => {
          if (data && data.Status === "Success") {
            if (data.Claim.Cclmntid.trim() === "") {
              this.onRowSelect({ data: data.Claim });
            } else {
              this.searchCriteria.setValue({
                policyNumber: data.Claim.PolicyNumber,
                claimNumber: data.Claim.ClaimNumber,
                dateOfLoss: data.Claim.DateOfLoss,
              });
              this.onSearch();
            }
          } else {
            this.confirmationService.confirm({
              key: "error-message",
              message:
                "The claim was NOT created. You may try again after clicking OK. If the problem persists, contact the Helpdesk.",
              accept: () => {},
            });
          }
        },
        (err) => {
          this.confirmationService.confirm({
            key: "error-message",
            message:
              "The claim was NOT created. You may try again after clicking OK. If the problem persists, contact the Helpdesk.",
            accept: () => {},
          });
        },
        () => {
          this.isSubmitted = false; // Reset to false after submission completes
        }
      );
    } else {
      this.confirmationService.confirm({
        key: "notice",
        message: "You haven't made any changes to the claim.",
        accept: () => {},
      });
      this.isSubmitted = false; // Reset to false if form is invalid or not dirty
    }
  }
}

Answer 2

You can disable the submit button in onSubmit function while you are asynchronously calling your endpoint. It is easier to do when you use the async/await pattern.

async onSubmit(): Promise<void> {
   try {
      this.isLoading = true;
   
      const data = await this.userService.AddClaim(model);
      ...
      ...
   } finally {
     this.isLoading = false;
   }
}

Then this would be your HTML:

<form (ngSubmit)="onSubmit(model)">
    ...
    ...
    <button type="submit" [disabled]="isLoading">
         Save Data
    </button>
</form>

However, please note that this way the user will still be able to submit the form by pressing the Enter key on the keyboard while having one of the form text fields focused. A better approach would be covering your form with a loading spinner. That will both prevent submitting by clicking the button and pressing the Enter key. It will also show the user that your working on the form submission which will be better user experience too.

I wrote an article about showing loading spinners in Angular. How to Create a Loading Spinner in Angular