patchValue with { emitEvent: false } 触发 Angular 4 formgroup 上的 valueChanges答案

【问题标题】：patchValue with { emitEvent: false } triggers valueChanges on Angular 4 formgrouppatchValue with { emitEvent: false } 触发 Angular 4 formgroup 上的 valueChanges
【发布时间】：2017-12-27 17:00:33
【问题描述】：

我有一个表单构建器组，正在使用 valueChanges 监听更改并触发保存功能，然后触发表单上的刷新功能：

 this.ticketForm.valueChanges.debounceTime(1000).distinctUntilChanged()
 .subscribe(data => {
   this.saveTicket();
   this.refreshTicket();
 })

然后，我使用 patchValue 重新加载表单并将数据重新分配到表单字段（以及页面上的其他位置，尤其是更改日志），例如：

    this.ticketForm.patchValue(ticket, { emitEvent: false });

然而，尽管 emitEvent : false，这会导致表单保存的无限循环。

这是 Angular 4/Ionic 3 的错误还是我的误解？

【问题讨论】：

该值的修补不会发出将由 valueChanges 检测到的更改事件...
这里也一样，你找到答案了吗？
使用 angular 5 它没有用patchValue(value, {emitEvent: false})触发事件
我也在使用 Angular 6，但它仍在使用 emitEvent: false 触发...不是每个人都会发生这种情况？
我遇到了同样的问题，我意识到这是因为我使用的是 customFormControl，而我的自定义表单控件在初始化时没有考虑 emitEvent: false

标签： angular typescript ionic-framework angular2-formbuilder angular-reactive-forms

【解决方案1】：

尝试以这种方式添加onlySelf: true 和emitEvent: false：

this.ticketForm.patchValue(ticket, {emitEvent: false, onlySelf: true});

【讨论】：

不确定这是否适用于 OP，但不适用于我
这对我有用。像这样修改，this.ticketform.updateValueAndValidity({emitEvent: false, onlySelf: true})
这可能是一个错误。从文档中，它说 onlySelf 的默认值应该是 true，这应该没有效果。无论如何，这里的行为与文档中的预期行为不匹配。
我只使用了 setValue 和 emitEvent，它对我有用，谢谢！
我尝试了上面的解决方案，它也适用于我。尽管如此，Pradeep 的评论让我感到困惑。我希望没有副作用。

【解决方案2】：

作为一种解决方法，我将跳过添加到 rxjs 管道

this.form.valueChanges
    .pipe(skip(1)).subscribe();

【讨论】：

【解决方案3】：

由于代表无法发表评论，因此我将其发布为@Craig Wayne 的答案。

emitEvent:false 仅在您通过以下方式监听表单控件上的值更改时才有效：

this.form.valueChanges.controlName.subscribe(val => doSomething(val));

如果您绑定到模型更改，则不管元素事件是否被发出：

<input (ngModelChange)="doSomething($event)"/>

【讨论】：

【解决方案4】：

在使用 Angular 9.1.13 时，我遇到了同样的问题。尝试使用FormControl.setValue 和FormGroup.patchValue API，并在所有可能的组合中使用建议的参数{emitEvent: false, onlySelf: true}。 valueChanges observable 仍在被触发。

最终对我有用的是：

myForm.disable();
myForm.patchValue({myControl: ''}, {onlySelf: true, emitEvent: false});
myForm.enable();

【讨论】：

我的项目在 Angular 8.3.21 上，这是唯一对我有用的答案。谢谢@ktsangop

【解决方案5】：

为什么在值发生变化时使用 patchValue 而不是在 onInit 上设置一次？

就个人而言，我在不同的上下文中在两个必需的 FormControl 之间构建选项时遇到了这个问题

我有一个字段清除另一个字段（按设计，只应填写一个），但随后订阅触发了原始字段清除。 emitEvent:false 没有帮助，因为我需要我的验证器在更新时运行。添加 if(value) 有助于避免级联修补。见下文：

this.formGroup.controls.item1.valueChanges.subscribe(value => {
   if(value){
     this.formGroup.patchValue({
       'item2':null
     })
   }
})

this.formGroup.controls.item2.valueChanges.subscribe(value => {
   if(value){
     this.formGroup.patchValue({
       'item1':null
     })
   }
})

注意：为简单起见，我没有包含 .pipe(takeUnitl(this.destroy$))。如果你不包括这个，它就会有内存泄漏

【讨论】：

我建议不要在答案中使用修辞问题。他们冒着被误解为根本不是答案的风险。您正在尝试回答此页面顶部的问题，不是吗？否则请删除此帖。