设置updateOn: blur的FormControl按回车提交时不更新值问题

我之前也踩过这个坑！当你给FormControl设置了updateOn: 'blur'后，点击提交按钮一切正常，但按回车提交时表单值没更新，核心原因是回车提交不会触发输入控件的blur事件：

• 点击提交按钮时，按钮会获取焦点，原来的输入控件自动失去焦点，触发blur事件，控件值同步到表单模型；
• 回车提交时，浏览器直接触发表单的submit事件，当前输入控件仍处于聚焦状态，blur事件没被触发，所以模型里还是旧值。

下面给你几个实用的解决方案：

方案1：提交前强制更新所有控件的值和状态 #

在提交方法里，遍历表单的所有控件，调用updateValueAndValidity()强制同步值，不管updateOn的配置：

onSubmit() {
  // 遍历表单控件，强制更新值与状态，emitEvent设为false避免额外触发valueChanges
  Object.values(this.yourFormGroup.controls).forEach(control => {
    control.updateValueAndValidity({ emitEvent: false });
  });

  // 现在可以正常获取更新后的表单值
  console.log(this.yourFormGroup.value);
  // 后续提交逻辑...
}

方案2：提交前让当前聚焦元素失去焦点 #

通过DOM操作，在提交前让当前活跃元素（也就是还聚焦的输入框）触发blur事件：

onSubmit() {
  // 检查当前活跃元素是否为HTML元素，触发blur
  const activeElement = document.activeElement;
  if (activeElement instanceof HTMLElement) {
    activeElement.blur();
  }

  // 此时表单值已更新，处理提交
  console.log(this.yourFormGroup.value);
}

方案3：全局自定义指令（适合多表单场景） #

如果你的项目里很多表单都有这个需求，可以写一个自定义指令，监听表单的submit事件，自动处理blur：

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

@Directive({
  selector: 'form[blurOnSubmit]'
})
export class BlurOnSubmitDirective {
  @HostListener('submit')
  onSubmit() {
    const activeElement = document.activeElement;
    if (activeElement instanceof HTMLElement) {
      activeElement.blur();
    }
  }
}

然后在表单模板里使用：

<form [formGroup]="yourFormGroup" (ngSubmit)="onSubmit()" blurOnSubmit>
  <!-- 表单控件 -->
  <button type="submit">提交</button>
</form>

这几个方案都能解决回车提交时值不更新的问题，根据你的项目场景选就行～

内容的提问来源于stack exchange，提问作者Serge Bekenkamp