Angular如何通过指令实现全局表单防重复提交的最优方案

实现思路 #

通过全局匹配所有form元素的指令自动拦截提交事件，无需在每个业务表单中单独维护提交状态、绑定禁用属性，全局默认生效且支持按需排除。

完整指令代码 #

import { Directive, ElementRef, HostListener, Input, OnInit } from '@angular/core';

@Directive({
  selector: 'form' // 匹配所有form元素，无需手动给form加指令属性
})
export class PreventSubmitFewTimesDirective implements OnInit {
  // 可选配置：是否启用防重复提交，默认启用
  @Input() preventDuplicateSubmit: boolean = true;
  // 可选配置：提交后多少毫秒自动恢复按钮可用，默认不自动恢复
  @Input() resetSubmitAfter: number = 0;

  constructor(private formEl: ElementRef<HTMLFormElement>) {}

  ngOnInit(): void {}

  @HostListener('submit', ['$event'])
  onFormSubmit(evt: Event): void {
    if (!this.preventDuplicateSubmit) return;

    // 批量获取表单内所有提交类按钮
    const submitElements = Array.from(
      this.formEl.nativeElement.querySelectorAll<HTMLButtonElement | HTMLInputElement>(
        'button[type="submit"], input[type="submit"]'
      )
    );

    // 禁用所有提交按钮
    submitElements.forEach(el => {
      el.disabled = true;
      el.classList.add('form-submitting'); // 可自定义提交状态样式
    });

    // 配置了自动恢复则到期重置按钮状态
    if (this.resetSubmitAfter > 0) {
      setTimeout(() => {
        submitElements.forEach(el => {
          el.disabled = false;
          el.classList.remove('form-submitting');
        });
      }, this.resetSubmitAfter);
    }
  }

  // 对外暴露手动重置方法，适配异步提交失败后恢复提交能力的场景
  resetSubmitState(): void {
    const submitElements = Array.from(
      this.formEl.nativeElement.querySelectorAll<HTMLButtonElement | HTMLInputElement>(
        'button[type="submit"], input[type="submit"]'
      )
    );
    submitElements.forEach(el => {
      el.disabled = false;
      el.classList.remove('form-submitting');
    });
  }
}

全局注册方式 #

在根模块或全局共享模块的declarations数组中添加该指令即可，无需修改现有业务表单代码：

// app.module.ts 示例
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PreventSubmitFewTimesDirective } from './prevent-submit-few-times.directive';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    PreventSubmitFewTimesDirective
  ],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

可选配置说明 #

• 某表单不需要防重复提交：给对应form标签添加属性[preventDuplicateSubmit]="false"即可
• 提交后自动恢复按钮：给对应form标签添加属性resetSubmitAfter="3000"，单位为毫秒，示例为3秒后自动恢复提交能力
• 异步提交失败手动恢复：在业务组件中通过@ViewChild获取表单指令实例，调用resetSubmitState()方法即可恢复提交能力

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