Reactive Forms：特定控件聚焦时阻止回车提交，其余场景保留回车提交能力

核心原则是不做全局表单级别的回车拦截，仅在目标输入控件自身的事件流中阻断默认提交行为，从根源上避免影响其他场景的原有回车提交流程。

实现步骤 #

1. 标记需要拦截的目标输入控件 #

所有用于修改FormGroup的文本输入，可以在模板层直接定位，不需要复杂的状态判断：

• 静态固定的输入：直接在输入元素上绑定键盘拦截逻辑
• 动态循环生成的输入：通过模板引用、自定义属性批量统一识别

比如静态输入的基础模板结构：

<form [formGroup]="editForm" (ngSubmit)="submitForm()">
  <!-- 通用业务输入：完全保留原有回车提交逻辑，不做任何修改 -->
  <input formControlName="commonField" placeholder="通用字段，回车可直接提交">

  <!-- 需拦截回车提交的修改类输入 -->
  <input 
    formControlName="editGroupField"
    (keydown.enter)="$event.preventDefault()"
    placeholder="修改类输入，按回车不触发全局提交"
  >
  <button type="button" (click)="syncEditField()">手动同步修改值</button>

  <button type="submit">提交表单</button>
</form>

2. 拦截逻辑的原理说明 #

Angular提供的keydown.enter事件修饰符，只会在当前元素按下回车键时触发回调，回调中执行$event.preventDefault()，即可阻断浏览器原生的“表单内聚焦元素按回车触发submit”的默认行为。
这种绑定方式的粒度是单控件级的：

• 只有当焦点停留在上述修改类输入上时，拦截逻辑才会生效
• 焦点移动到其他输入、按钮、页面任意其他位置时，按回车完全走原生表单提交流程，和未修改前的行为完全一致
• 不存在全局事件监听带来的焦点判断时序、性能损耗问题

3. 动态生成输入的批量处理方式 #

如果修改类输入是通过*ngFor动态渲染的，不需要重复给每个输入手写事件绑定，可以通过视图查询批量挂载拦截逻辑：

import { ViewChildren, QueryList, ElementRef, AfterViewInit } from '@angular/core';

// 组件类内部
export class DemoComponent implements AfterViewInit {
  // 匹配所有带模板引用的目标输入
  @ViewChildren('blockEnterSubmit') targetInputs!: QueryList<ElementRef<HTMLInputElement>>;

  ngAfterViewInit() {
    this.targetInputs.forEach(inputEl => {
      inputEl.nativeElement.addEventListener('keydown', (event) => {
        // 仅拦截回车键
        if (event.key === 'Enter') {
          event.preventDefault();
        }
      })
    })
  }
}

对应动态循环的模板写法：

<ng-container *ngFor="let control of dynamicControls">
  <input 
    [formControlName]="control.name"
    #blockEnterSubmit
    [placeholder]="control.placeholder"
  >
</ng-container>

避坑提示 #

• 不要在<form>标签的全局keydown事件中做回车拦截，这种写法容易因为焦点判断不及时，误拦其他场景的正常提交流程
• 不要为了拦截回车给输入元素乱加type属性，保持原生text输入的语义，仅通过事件阻断默认行为即可
• 不需要修改Reactive Forms本身的提交配置，整个实现完全和表单的验证、提交流程解耦

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