Angular 11 响应式表单订阅输入框valueChanges无限触发如何解决？

你遇到的无限触发问题基本可以归为三类常见场景：

• _validatorFunctionsService.validateAllForms() 全局校验方法内部存在隐式的表单控件值修改操作，比如自动格式化输入内容、trim空格、修正非法值后回填到控件，每次修改都会再次触发valueChanges事件，形成死循环
• 订阅代码重复注册：如果这段订阅逻辑写在ngAfterViewChecked、输入属性变更回调等会重复执行的生命周期/钩子函数中，每次执行都会新增一个订阅，同一个值变更会触发多次回调，看起来就是持续无限触发
• attributes.sectionName赋值操作联动了表单更新：如果attributes对象和sectionForm存在双向绑定关联，给sectionName赋值后会自动同步回sectionText表单控件，触发新一轮值变更事件

1. 首先确保订阅只注册一次，同时增加销毁逻辑避免内存泄漏
   在组件中新增销毁流，把订阅逻辑放到ngOnInit中执行，示例代码如下：

// 组件类内定义销毁流
private destroy$ = new Subject<void>();

ngOnInit(): void {
  this.sectionForm
    ?.get('sectionText')
    .valueChanges.pipe(
      debounceTime(1000),
      takeUntil(this.destroy$) // 组件销毁时自动取消订阅
    )
    .subscribe((_newVal) => {
      if (this.attributes?.sectionName != _newVal) {
        this.attributes.sectionName = _newVal;
      }
      this._validatorFunctionsService.validateAllForms();
    });
}

ngOnDestroy(): void {
  this.destroy$.next();
  this.destroy$.complete();
}

2. 校验逻辑修改表单值时关闭事件触发
   如果validateAllForms内部确实存在修改表单控件值的操作，所有setValue/patchValue调用都补充{emitEvent: false}参数，避免修改值时再次触发valueChanges事件，示例：

// 校验逻辑内修改控件值的正确写法
formControl.patchValue(formattedVal, { emitEvent: false });

3. 快速排查触发源
   可以在订阅回调中加入console.trace()，控制台会输出每次触发的完整调用栈，能直接定位到触发值变更的具体代码位置。

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