如何给Angular所有表单全局添加keyup.enter提交事件，无需逐个修改组件？

最优方案：全局通用表单指令 #

该方案不需要修改任何现有表单代码，全场景自动生效，解决你之前指令实现失败的问题：核心逻辑是触发表单原生submit事件，和业务逻辑完全解耦，不需要关心每个表单提交方法的命名。

1. 新建全局表单指令

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

@Directive({
  selector: 'form' // 直接匹配所有form元素，不需要手动给表单加指令名
})
export class FormAutoSubmitOnEnterDirective {
  constructor(private el: ElementRef<HTMLFormElement>) {}

  @HostListener('keyup.enter', ['$event'])
  onEnterPress(event: KeyboardEvent) {
    // 排除textarea场景，避免多行输入时按回车误提交
    const target = event.target as HTMLElement;
    if (target.tagName.toLowerCase() === 'textarea') return;

    // 触发表单原生submit事件，自动触发你已绑定的submitForm方法
    this.el.nativeElement.dispatchEvent(new Event('submit'));
    event.preventDefault();
  }
}

2. 注册指令
   在根模块AppModule或者全局共享的SharedModule的declarations和exports数组中加入上述指令，确保所有组件都能生效。

轻量备选方案：全局事件监听 #

如果不想额外创建指令，可以直接在根组件AppComponent中添加全局监听逻辑，同样全局生效：

import { HostListener } from '@angular/core';

// 直接加在AppComponent类内部
@HostListener('document:keyup.enter', ['$event'])
onGlobalEnterPress(event: KeyboardEvent) {
  const target = event.target as HTMLElement;
  if (target.tagName.toLowerCase() === 'textarea') return;
  // 查找当前输入元素所属的表单
  const belongForm = target.closest('form');
  if (belongForm) {
    belongForm.dispatchEvent(new Event('submit'));
    event.preventDefault();
  }
}

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