如何避免在角度表单上多次提交点击

Question

`嗨，我对这个有角度的东西很陌生，不太明白如何完成表单的这一部分。
我们让人们非常快速地多次点击提交按钮，并在将信息发送到 API 之前多次添加相同的信息。

我尝试在这里搜索，甚至用谷歌搜索，但我觉得我们的表格非常具体，找不到任何看起来很接近的东西。

下面是 Claim.components.ts 文件中的提交按钮代码。

这是我所拥有的，任何建议都会非常有帮助：

onSubmit(model: ClaimDto) {
  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.AddClaim(model).subscribe(
            (data) => {
              if (data) {
                if (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: () => {},
              });
            },
            () => {}
          );
        }
      } else {
        this.confirmationService.confirm({
          key: "notice",
          message: "You haven't made any changes to the claim.",
          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

您应该简单地在组件类中添加一个属性

isSubmitted = false

。

您应该在提交之前进行检查

if (!this.isSubmitted)

。

在致电服务之前将其设置为

true

，并在返回响应后返回到

false

。

您也像这样禁用了按钮

<button type="submit" [disabled]="submitted">Click me</button>

。

Answer 2

您可以在异步调用端点时禁用

onSubmit

函数中的提交按钮。使用 async/await 模式会更容易。

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

那么这就是您的 HTML：

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

但是，请注意，通过这种方式，用户仍然可以通过按键盘上的 Enter 键来提交表单，同时聚焦其中一个表单文本字段。更好的方法是用加载旋转器覆盖您的表单。这将阻止通过单击按钮并按 Enter 键进行提交。它还会向用户展示您正在处理表单提交，这也会带来更好的用户体验。

我写了一篇关于在 Angular 中展示加载旋转器的文章。 如何在 Angular 中创建加载旋转器