Angular中如何防止用户重复提交表单？

这个问题太常见了——用户快速多次点击提交按钮，就会触发多个异步请求，导致重复创建用户。咱们可以通过控制请求状态+禁用按钮的组合方案彻底解决，具体调整如下：

1. 完善按钮的禁用逻辑 #

首先修改HTML按钮，把请求进行中的状态isInProgress加入禁用条件，这样请求发起后按钮会直接灰掉，用户没法重复点击：

<button 
  mat-flat-button 
  color="primary" 
  [disabled]="userStatus == 'USER_EXISTS_ON_CURRENT_ACCOUNT' || isInProgress" 
  (click)="createUser()">
  Create User
</button>

2. 调整TypeScript的请求逻辑 #

核心是在发起请求前立刻标记请求状态为“进行中”，同时利用RxJS的finalize操作符统一处理状态重置（不管请求成功还是失败，都会执行这个回调），避免重复代码：

createUser() {
  // 第一步：发起请求前立即标记为进行中，阻断后续点击
  this.isInProgress = true;

  this.accountService.create(this.modelForm.value).pipe(
    // finalize会在请求完成/报错时自动执行，统一重置状态
    finalize(() => { this.isInProgress = false; })
  ).subscribe({
    next: (res) => {
      this.notificationService.showSuccess('User has been created successfully.');
      this._router.navigate(['settings/user']);
    },
    error: (err) => {
      this.notificationService.showError('Something went wrong, Try again later.');
      // 这里不用手动重置isInProgress，finalize会处理
    }
  });
}

为什么这样有效？ #

• 点击按钮的瞬间就把isInProgress设为true，按钮立刻禁用，从根源上阻止重复点击
• finalize操作符确保无论请求成功还是失败，都会把状态重置为false，按钮恢复可用
• 去掉了原代码中error和complete回调里重复的状态重置逻辑，让代码更简洁可靠

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