typescript 带有{ emitEvent:false,仅限自身:true }触发值Angular 变化

unhi4e5o  于 2023-01-14  发布在  TypeScript
关注(0)|答案(2)|浏览(92)

我有一个Reset按钮,它可以使用patchValue重置domain的值

onReset() {      
    this.addModelForm.patchValue({ domain: '', emitEvent: false, onlySelf: true}); 
}

这是域的valueChanges方法:

this.addModelForm.get('domain').valueChanges.subscribe(domainId => {
    console.log("value changed!")
});

它在控制台上打印“value changed!”2次。我不想触发valueChanges方法。emitEvent不工作。

ddarikpa

ddarikpa1#

由于您在FormGroup上使用patchValue,因此应该如下所示:

试试这个

this.addModelForm.patchValue( { domain: '' },{emitEvent: false});
wkftcu5l

wkftcu5l2#

对我有效的是这样的构造,它在单元测试中也很好用。

programmaticUpdate = false; // prevents excessive event emission and infinite loops

// ...

private suppressEvents(callback: () => void) {
  this.programmaticUpdate = true;
  try {
    callback();
  } finally {
    this.programmaticUpdate = false;
  }
}

用法:

this.suppressEvents(() => {
  this.addModelForm.patchValue({ domain: '' }); 
});

不要忘记忽略编程的valueChanges,如下所示:

this.addModelForm.get('domain').valueChanges.pipe(
  filter(() => !this.programmaticUpdate), // ignore programmatic updates
  takeUntil(this.destroy$), // best practice, read about it online
).subscribe(domainId => {
  console.log("value changed!")
});

emitEvent从来没有为我工作过,即使是今天与Angular 15。

  • 来源:6年的Angular经验。*

相关问题