是否可以将全局事件(keyup.enter)添加到所有表单中?

Question

假设我有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。在每个组件上输入?

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

(submit.enter)="submitForm()" 

但这是不存在的

还与指令我尝试但没有成功…任何想法?

Answer 1

创建一个指令来选择form元素，并为该元素添加一个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上查看工作示例