[英]patchValue with { emitEvent: false } triggers valueChanges on Angular 4 formgroup
I have a formbuilder group and am listening for changes with valueChanges and triggering a save function followed by refresh function on the form:我有一个 formbuilder 组,正在监听 valueChanges 的更改并触发保存功能,然后是表单上的刷新功能:
this.ticketForm.valueChanges.debounceTime(1000).distinctUntilChanged()
.subscribe(data => {
this.saveTicket();
this.refreshTicket();
})
I am then reloading the form and repatching the data to form fields (and elsewhere on the page, particularly a change log) with patchValue, eg:然后我重新加载表单并使用 patchValue 将数据重新分配到表单字段(以及页面上的其他地方,特别是更改日志),例如:
this.ticketForm.patchValue(ticket, { emitEvent: false });
however, this causes an infinite loop of saves of the form despite emitEvent : false.然而,尽管有emitEvent : false,这会导致表单保存的无限循环。
Is this an Angular 4/Ionic 3 bug or a misunderstanding on my part?这是 Angular 4/Ionic 3 的错误还是我的误解?
尝试以这种方式添加onlySelf: true
和emitEvent: false
:
this.ticketForm.patchValue(ticket, {emitEvent: false, onlySelf: true});
While working with Angular 9.1.13 I had been facing the same problem.在使用 Angular 9.1.13 时,我遇到了同样的问题。 Tried to use the FormControl.setValue
, and FormGroup.patchValue
APIs, using also the suggested params {emitEvent: false, onlySelf: true}
in all possible combinations.尝试使用FormControl.setValue
和FormGroup.patchValue
API,同时在所有可能的组合中使用建议的参数{emitEvent: false, onlySelf: true}
。 The valueChanges
observable is was still being triggered. valueChanges
observable 仍在被触发。
The only thing that worked for me eventually was :最终唯一对我有用的是:
myForm.disable();
myForm.patchValue({myControl: ''}, {onlySelf: true, emitEvent: false});
myForm.enable();
As a workaround, i add skip to rxjs pipe作为一种解决方法,我将跳过添加到 rxjs 管道
this.form.valueChanges
.pipe(skip(1)).subscribe();
Can't comment because of rep, so I will post it as an answer to @Craig Wayne.由于代表而无法发表评论,因此我会将其发布为@Craig Wayne 的答案。
emitEvent:false works only if you are listening to value changes on the form control with:仅当您通过以下方式监听表单控件上的值更改时,emitEvent:false 才有效:
this.form.valueChanges.controlName.subscribe(val => doSomething(val));
if you are binding to model changes on the element event is emitted regardless:如果您绑定到元素上的模型更改,则无论如何都会发出事件:
<input (ngModelChange)="doSomething($event)"/>
this.filter_form.valueChanges
.pipe(debounceTime(400), startWith(this.filter_form.value), pairwise(), takeUntil(this._OnDestroy))
.subscribe(([prev, curr]) => {
console.log(prev, curr)
if(prev.date != curr.date && curr.date == 'select_date'){
this.filter_form.patchValue({
this.filter_form.get('from_date').setValue(moment().startOf('month').toDate(), {emitEvent: false});
this.filter_form.get('to_date').setValue(moment().add('5','M').endOf('month').toDate(), {emitEvent: false});
}, {emitEvent: false});
this.getLeave();
}
});
i remove the debounceTime(400) and patch individual controls value using setValue我删除了 debounceTime(400) 并使用 setValue 修补单个控件值
and it worked for me它对我有用
Why use a patchValue whenever a value changes instead of setting it once onInit?为什么在值更改时使用 patchValue 而不是在 onInit 设置一次?
Personally, I had this issue in a different context in building an option between two required FormControl's就个人而言,我在不同的上下文中遇到了这个问题,以在两个必需的 FormControl 之间构建一个选项
I had a field clearing out another field (as designed, only one should be filled out), but then the subscribe triggered the original to clear.我有一个字段清除另一个字段(按照设计,只应填写一个),但随后订阅触发了原始字段的清除。 emitEvent:false didn't help because I needed my validators to run on an update.发射事件:假没有帮助,因为我需要我的验证器在更新时运行。 Adding if(value) helped it avoid cascade patching.添加 if(value) 有助于避免级联修补。 See below:见下文:
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
})
}
})
Note: For simplicity sake, I didn't include the .pipe(takeUnitl(this.destroy$)).注意:为简单起见,我没有包含 .pipe(takeUnitl(this.destroy$))。 If you don't include this, it'll have a memory leak如果你不包括这个,它就会有内存泄漏
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.