Angular FormGroup是否可获取绑定控件的blur事件流执行指定操作？

你要找的FormGroup统一调度内部控件交互的事件流，在Angular Forms模块中是有官方内置支持的，整个实现不需要修改updateOn配置，也不需要在模板中绑定DOM事件，完全匹配你的所有约束条件。

核心方案（Angular v8及以上版本） #

Angular从v8开始，在所有AbstractControl实例（包括FormGroup、FormControl、FormArray）上暴露了events observable，这个流就是框架统一转发内部控件交互事件的出口，会抛出所有和控件交互相关的事件类型，包括blur、focus、值变更、校验状态变更等。

实现优势 #

• 只需要在顶层FormGroup上订阅一次流，就能捕获所有子级控件、嵌套FormGroup/FormArray下的blur事件，不需要给每个控件单独加监听
• 整个逻辑完全独立于updateOn配置：哪怕保留默认的updateOn: 'change'配置，blur事件依然会正常被捕获，不会限制值更新的触发时机，完全支持“用户光标停在输入框内按键提交”的场景
• 完全不需要在模板中给每个DOM元素绑定blur事件，后续新增、修改表单项时，只要控件挂在对应的FormGroup层级下，blur事件就会自动被捕获，大幅减少重复代码和后期维护成本

代码示例 #

import { FormGroup, BlurEvent } from '@angular/forms';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

// 业务中定义的FormGroup
profileForm = new FormGroup({
  nickName: [''],
  email: ['']
});

constructor() {
  // 直接订阅顶层FormGroup的事件流
  this.profileForm.events
    .pipe(takeUntilDestroyed())
    .subscribe((event) => {
      // 过滤出blur类型的事件
      if (event instanceof BlurEvent) {
        // event.control 就是实际触发blur的控件实例
        const triggerControl = event.control;
        // 在这里写你要执行的blur逻辑即可
        console.log(`控件触发blur：`, triggerControl);
      }
    });
}

低版本兼容方案（Angular v8以下） #

如果项目使用较早的Angular版本，没有内置的events流，可以利用框架内置的touched状态逻辑实现等效效果：

框架内置逻辑说明：无论updateOn配置是什么，只要绑定的原生input触发blur，一定会把对应控件的touched状态从false置为true，这个逻辑独立于值更新、校验更新的规则。

实现方式就是递归遍历FormGroup下的所有控件，监听状态变更，捕获touched状态从false切换为true的时机，等价于blur触发的时机。

参考实现 #

import { FormGroup, FormArray, AbstractControl } from '@angular/forms';

function registerBlurObserver(group: FormGroup, onBlur: (control: AbstractControl) => void) {
  Object.keys(group.controls).forEach(controlName => {
    const control = group.get(controlName);
    // 嵌套的子表单/数组，递归处理
    if (control instanceof FormGroup || control instanceof FormArray) {
      registerBlurObserver(control as FormGroup, onBlur);
      return;
    }
    // 记录控件初始的touched状态
    let prevTouched = control.touched;
    control.statusChanges.subscribe(() => {
      const currentTouched = control.touched;
      // 状态从未触碰变为已触碰，就是blur触发的时机
      if (!prevTouched && currentTouched) {
        onBlur(control);
      }
      prevTouched = currentTouched;
    });
  });
}

// 组件初始化时调用
registerBlurObserver(this.profileForm, (control) => {
  // 执行blur对应逻辑
  console.log('检测到blur触发', control);
});

• 不要使用valueChanges判断blur时机：值变更事件只有控件值改动时才会触发，如果用户点击输入框后没有改任何内容就移出焦点，根本不会触发值变更，判断逻辑完全不准
• 注意内存清理：所有RxJS订阅都需要在组件销毁时取消，避免内存泄漏，新版本Angular直接用takeUntilDestroyed即可，老版本可以配合销毁用的Subject手动完成退订
• 该方案和updateOn: 'blur'没有耦合：你完全可以保留默认的change触发值更新逻辑，不会出现“必须移出输入框才能更新值”的问题，不影响用户停留在输入框时按键提交的交互

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