typescript 具有{ emitEvent:false }在Angular 4 formgroup上触发valueChanges

vohkndzv  于 2023-04-22  发布在  TypeScript
关注(0)|答案(6)|浏览(92)

我有一个formbuilder组,正在监听valueChanges的更改,并触发保存功能,然后在表单上执行刷新功能:

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

然后,我重新加载表单并使用patchValue将数据重新修补到表单字段(以及页面上的其他地方,特别是更改日志),例如:

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

但是,这会导致无限循环的保存形式,尽管emitEvent:假的
这是Angular 4/Ionic 3的bug还是我的误解?

r55awzrz

r55awzrz1#

尝试以这种方式将onlySelf: trueemitEvent: false沿着添加:

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

ekqde3dh2#

不能评论,因为代表,所以我会张贴它作为一个答案@克雷格韦恩。
emitEvent:false仅当您使用以下命令侦听表单控件上的值更改时才有效:

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

如果您绑定到元素上的模型更改,则无论如何都会发出事件:

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

62lalag43#

在使用Angular 9.1.13时,我也遇到了同样的问题。尝试使用FormControl.setValueFormGroup.patchValue API,同时使用所有可能的组合中的建议参数{emitEvent: false, onlySelf: true}valueChanges可观察到的仍然被触发。
最后唯一对我起作用的是:

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

h9vpoimq4#

为什么每次值更改时都使用patchValue,而不是在Init上设置一次?
就我个人而言,我在不同的上下文中遇到了这个问题,在两个必需的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$))。如果不包括它,它将有内存泄漏

ckocjqey

ckocjqey5#

在Angular 15中,没有一个建议的解决方案对我有效。
我正在使用ngModelChange事件侦听器。

am46iovg

am46iovg6#

作为一种变通方法,我向RXJS管道添加了skip

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

相关问题