Angular

Question

用户需要在 textarea 但不是在 formGroup 中使用 enter key。

这是我的 html

<form [formGroup]="interventionForm" (ngSubmit)="onSubmit()" (keydown.enter)="$event.preventDefault()">

    <textarea class="focus-input gap-textarea"></textarea>

<button type="submit" class="btn teq-btn">{{ lang.trans('send') }}</button>

</form>

formGroup 未通过按 enter 键 提交，但 textareas正在受到影响。

Answer 1

您需要使用 $event.stopPropagation() 而不是 $event.preventDefault()。您的代码应如下所示：

<form [formGroup]="interventionForm" (ngSubmit)="onSubmit()" (keydown.enter)="$event.stopPropagation()">

    <textarea class="focus-input gap-textarea"></textarea>

<button type="submit" class="btn teq-btn">{{ lang.trans('send') }}</button>

</form>

Answer 2

我认为这回答了您的问题，但也适用于遇到此问题的任何其他人，如果您希望 keydown.enter 在 textarea 中工作但不在其他地方提交表单，则以下方法有效对我来说：

<form (keydown.enter)="$event.preventDefault()">
  <textarea (keydown.enter)="$event.stopPropagation()"></textarea>
  <button type="submit">Submit</button>
</form>

这会阻止 keydown.enter 提交表单：
<form (keydown.enter)="$event.preventDefault()">

这允许 enter 仍然在 textarea:
中创建新行 <textarea (keydown.enter)="$event.stopPropagation()">

旁白：按回车键提交表单只是提交按钮出现时的默认行为：
<button type="submit">Submit</button>
可能你一开始就没有 need/want 这个，所以你可以把它改成 type="button".

Answer 3

一个好的解决方案是使用自定义指令来管理 Enter 键按下，在文本区域忽略它：

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

@Directive({
  selector: '[enterKeyPress]'
})
export class EnterKeyPressDirective {
  @Output()
  public enterKeyPress = new EventEmitter<void>();

  @HostListener('keyup.enter', ['$event'])
  public onKeyUpEnter(event: KeyboardEvent): void {
    const targetTagName = (event.target as HTMLElement).tagName.toLowerCase();

    if (targetTagName !== 'textarea') {
      this.enterKeyPress.emit();
    }
  }
}

因此您可以安全地使用表单，也可以在其中使用文本区域：

<form (enterKeyPress)="submit()">
  <input type="text" />
  <textarea></textarea>
</form>

Angular - 允许在 textarea 上输入键，但不允许在 formGroup 中输入

Angular - Allow Enter Key on textarea but not in formGroup

formgroups