如何避免在执行form.reset后触发valueChange

Question

我需要避免在执行表单后触发valueChange。重置

userForm: FormGroup;
this.userForm.reset({ emitEvent: false });
private roleValueChanges() {
this.userForm.controls.role.valueChanges.subscribe(roleId => {
this.rolesService.get(roleId);
}
}

尽管存在emitEvent:false，但当.reset表单时，值Change正在被激发。有什么办法避免它吗？

我找到了一个适合我的解决方案：

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

Answer 1

您以错误的方式传递emit事件。尝试

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

检查文档https://angular.io/api/forms/FormGroup#reset

Answer 2

根据文档重置：

reset(value: any = {}, options: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void

正如您所看到的，reset中的第一个选项是value，因此当前您正在告诉窗体，它应该将formcontrolemitEvent重置为false。相反，在这种情况下，当您使用emitEvent时，您还需要将值告知表单，在这种情形下，很可能一个空对象就足够了。

因此，将功能更改为：

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

DEMO为了供您参考，请在提交时查看控制台，其中表单将重置，valueChanges不会被激发。