How to avoid multiple submit clicks on an angular form

`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: () => {},
      });
    }
  }
}

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
    }
  }
}