是否可以向所有表单添加全局事件（keyup.enter）？答案

【问题标题】：Is it possible to add a global event (keyup.enter) to all forms?是否可以向所有表单添加全局事件（keyup.enter）？
【发布时间】：2021-12-01 11:00:23
【问题描述】：

想象一下我在 1000 个组件中有 1000 个表单的情况......

经典形式：

<form (submit)="submitForm()" >
  <input type="text"> 
  <button type="submit"> Submit </button>
</form>

我需要考虑所有组件并添加每个组件keyup.enter：

<form (submit)="submitForm()" (keyup.enter)="submitForm()">
  <input type="text"> 
  <button type="submit"> Submit </button>
</form>

有没有人有任何解决方案如何以最简单的方式做到这一点，而无需将 keyup.enter 放在每个组件上？

例如，我先用谷歌搜索了一些东西

(submit.enter)="submitForm()"

但这是不存在的。

我也在尝试使用指令但没有成功...... 有什么想法吗？

【问题讨论】：

首先，您为什么要提交每个表单？否则，在直接的 javascript 中，您可以为文档上的 keyup 事件设置侦听器，或者仅在表单元素集合上设置侦听器，如果输入，则从事件中获取表单 ID 并提交。
ngSubmit 也适用于输入，但仅当该字段在输入上处于活动状态时...

标签： javascript angular typescript

【解决方案1】：

创建一个选择表单元素的指令，并为该元素添加一个 HostListener：

@Directive({ selector: 'form' })
export class MyFormDirective {

  constructor(
    private readonly el: ElementRef<HTMLFormElement>
  ) { }

  @HostListener('keyup.enter', ['$event'])
  onFormKeyUp(evt: KeyboardEvent) {
    this.el.nativeElement.submit();
  }
}

在Stackblitz上查看工作示例

【讨论】：

我设置了这个，但它不起作用。我刚刚做了一个指令并添加了这个代码？我是否需要调整组件本身和模板内部的某些内容？
你能帮我解决这个问题吗？我的功能没有被触发？为什么？发生了什么？
你在吗？你能帮帮我吗？它现在不适合我....我不知道为什么。它不触发？你知道问题出在哪里吗？
您是否将其添加到您应用的模块中？
@yajoj98337 我在答案中添加了一个工作示例。