Angular表单执行reset操作后如何避免触发valueChange事件

问题现象 #

调用FormGroup的reset方法时，已传入emitEvent: false配置参数：

userForm: FormGroup;
this.userForm.reset({ emitEvent: false });

但执行reset操作后，已订阅的单个控件valueChanges事件依然会被触发，例如针对role控件的订阅逻辑：

private roleValueChanges() {
    this.userForm.controls.role.valueChanges.subscribe(roleId => {
       this.rolesService.get(roleId);
    })
}

原因说明 #

• FormGroup级别传入的emitEvent配置，仅会作用于Group自身的valueChanges、statusChanges事件，不会向下同步到内部所有子控件的事件触发流程，因此无法阻断单个控件的事件回调。

可行实现方案 #

经实践验证，遍历所有顶层表单控件，逐控件调用reset方法并传入对应配置即可满足需求：

Object.keys(this.userForm.controls).forEach( fc => {
  this.userForm.get(fc).reset(null, {onlySelf: true, emitEvent: false});
});

配置项说明：

• emitEvent: false：阻断当前控件的valueChanges、statusChanges事件触发
• onlySelf: true：限制状态变更仅作用于当前控件，不会向父级表单组冒泡，避免触发父级的额外事件
  如果表单包含嵌套的FormGroup、FormArray结构，可递归遍历所有层级的子控件后执行相同的reset逻辑，彻底阻断所有层级的事件触发。

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