Angular中添加点击禁用按钮指令后(ngSubmit)事件不触发如何解决？

问题根因 #

你自定义的click.disable指令绑定的click事件执行优先级高于表单的ngSubmit事件，点击按钮后指令会立刻同步将按钮设为disabled状态。Angular和浏览器在执行表单提交逻辑前会校验提交按钮的状态，检测到按钮已禁用就会终止提交流程，因此ngSubmit事件不会触发。

可选解决方案 #

方案1：调整指令禁用的执行时机（侵入性最低） #

把禁用操作放到异步队列中，等ngSubmit事件触发完成后再执行禁用，仅需修改指令的hostClick方法即可，无需改动其他业务代码，保留指令的全局复用能力：

@HostListener('click', ['$event'])
hostClick(e: Event) {
  // 0延迟的setTimeout会将禁用操作推到下一个宏任务执行，不会阻塞当前的表单提交流程
  setTimeout(() => {
    this.disabled = true
  }, 0)
}

方案2：指令适配表单提交场景 #

如果担心异步逻辑不可靠，可以给指令增加表单提交事件监听，适配表单场景的禁用需求：

1. 首先给按钮显式指定type="submit"属性：

<button type="submit" class="btn-primary full-width d-block" click.disable>Login</button>

2. 修改指令代码，监听所在表单的ngSubmit事件触发禁用：

import { Directive, HostListener, HostBinding, Optional } from '@angular/core';
import { NgForm } from '@angular/forms';

@Directive({
  selector: '[click.disable]'
})
export class ClickDisableDirective {
  disabled = false

  constructor(@Optional() private ngForm: NgForm) {
    // 若按钮在表单内，监听表单提交事件触发禁用
    if (this.ngForm) {
      this.ngForm.ngSubmit.subscribe(() => {
        this.disabled = true;
      })
    }
  }

  // 保留非表单场景下的点击禁用逻辑
  @HostListener('click', ['$event'])
  hostClick(e: Event) {
    if (!this.ngForm) {
      this.disabled = true;
    }
  }

  @HostBinding('disabled')
  get disable() {
    return this.disabled
  }
}

方案3：业务侧自主控制禁用状态（灵活性最高） #

如果不需要全局复用该禁用逻辑，可以直接在业务代码中控制按钮状态，还可以兼容提交失败后恢复按钮点击的需求：

1. 修改按钮代码绑定禁用状态：

<button type="submit" class="btn-primary full-width d-block" [disabled]="isSubmitting">Login</button>

2. 调整组件业务代码：

// 新增提交状态变量
isSubmitting = false;

async submit() {
  this.isSubmitting = true;
  try {
    const x = await this.auth.login(this.form)
    if (x.type === 'LoginSuccess') {
      this.redirectService.navigate('profile')
    } else {
      this.error = x.payload.message as string
      // 提交失败恢复按钮可点击
      this.isSubmitting = false;
    }
  } catch (err) {
    // 接口异常时也恢复按钮
    this.isSubmitting = false;
  }
}

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