如何在使用Angular 9按下Enter时提交表单？

在Angular 9中，实现按下Enter键提交表单的关键在于使用@HostListener修饰器监听按键事件，以及使用EventEmitter将按键事件发送到组件中。

以下是实现按下Enter键提交表单的步骤：

1. 导入@HostListener和EventEmitter模块：

import { Component, OnInit, HostListener, EventEmitter } from '@angular/core';

2. 在组件中定义一个EventEmitter变量：

@Output() enterKeyPressed: EventEmitter<any> = new EventEmitter();

3. 使用@HostListener修饰器监听按键事件，并发送到组件：

@HostListener('window:keyup', ['$event'])
keyEvent(event: KeyboardEvent) {
  if (event.keyCode === 13) {
    this.enterKeyPressed.emit(null);
  }
}

在这里，我们使用了window:keyup监听器来监听键盘按键事件。然后我们检查按下的按键是否是Enter键（keyCode为13），如果是，则发送一个null事件到enterKeyPressed事件发射器。

4. 在模板中使用ngSubmit指令来触发表单提交事件：

<form (ngSubmit)="onSubmit()" #myForm="ngForm">
  ...
</form>

在这里，我们使用ngSubmit指令来触发onSubmit()函数，该函数将处理表单的提交事件。

5. 在组件中定义onSubmit()函数：

onSubmit() {
  // 处理表单提交逻辑
}

现在，当用户按下Enter键时，keyEvent()函数将被调用，并向组件发送一个事件。该事件将由enterKeyPressed事件发射器处理，并触发表单的提交事件。

完整代码如下：

import { Component, OnInit, HostListener, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  @Output() enterKeyPressed: EventEmitter<any> = new EventEmitter();

  constructor() { }

  ngOnInit(): void {
  }

  @HostListener('window:keyup', ['$event'])
  keyEvent(event: KeyboardEvent) {
    if (event.keyCode === 13) {
      this.enterKeyPressed.emit(null);
    }
  }

  onSubmit() {
    // 处理表单提交逻辑
  }
}

<form (ngSubmit)="onSubmit()" #myForm="ngForm">
  ...
</form>

这样，我们就成功地实现了按下Enter键提交表单的功能。