如何避免Angular表单被多次点击提交？

针对你遇到的用户快速点击提交按钮导致重复请求的问题，最直接的解决思路是在请求处理过程中阻止重复触发提交逻辑，以下是两种实用方案：

方案一：用提交状态标志位控制 #

在组件类中添加一个布尔变量标记当前是否正在提交，提交前检查该状态，避免重复执行提交逻辑。

代码修改步骤： #

1. 在组件类中新增状态变量：

isSubmitting = false;

2. 修改onSubmit方法：

onSubmit(model: ExampleDto) {
  // 正在提交时直接返回，阻止重复触发
  if (this.isSubmitting) return;

  if (!this.form.disabled) {
    if (this.form.valid) {
      if (this.form.dirty) {
        if (this.mode === this.modes.Add) {
          // 标记为正在提交状态
          this.isSubmitting = true;
          
          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:
                      "示例创建失败。点击确定后可重试。若问题持续，请联系技术支持。",
                    accept: () => {},
                  });
                }
              }
            },
            (err) => {
              this.confirmationService.confirm({
                key: "error-message",
                message:
                  "示例创建失败。点击确定后可重试。若问题持续，请联系技术支持。",
                accept: () => {},
              });
            },
            () => {
              // 请求完成（成功/失败）后重置提交状态
              this.isSubmitting = false;
            }
          );
        }
      } else {
        this.confirmationService.confirm({
          key: "notice",
          message: "你未对示例做任何修改。",
          accept: () => {},
        });
      }
    } else {
      this.confirmationService.confirm({
        key: "error-message",
        message:
          "表单存在错误。点击确定后修正问题，再重新提交。",
        accept: () => {},
      });
    }
  }
}

方案二：提交时禁用表单（更彻底） #

如果希望在请求过程中用户完全无法操作表单，可以结合禁用表单的方式，进一步防止误操作：

修改onSubmit中的状态设置部分：

if (this.mode === this.modes.Add) {
  // 标记提交状态并禁用表单
  this.isSubmitting = true;
  this.form.disable();
  
  delete model["CompanyName"];
  // ... 其余提交逻辑
  
  this.userService.AddExample(model).subscribe(
    // ... 成功/失败回调
    () => {
      // 请求完成后恢复表单状态
      this.isSubmitting = false;
      this.form.enable();
    }
  );
}

说明 #

• 方案一仅阻止重复提交，用户仍可修改表单内容；方案二直接禁用整个表单，更适合需要严格控制请求过程中表单状态的场景。
• 两种方案都通过在请求开始时锁定状态、请求结束后解锁的逻辑，彻底避免了快速点击导致的重复API请求。

内容的提问来源于stack exchange，提问作者Red