监听频繁调用的表单值变化

Question

我有三个来自控件，

名字，
姓氏
自定义表单控件

自定义表单控件是一个简单的计数器，可以增加或减少输入框中的值。我听整个表单的值变化。问题是当我包含这个自定义表单控件时，在某些情况下触发表单值更改，例如当其他输入标签获得焦点或单击文档正文或页面滚动时.我知道值的变化只订阅了表单中任何表单控件的值变化，但它也会在上面提到的奇怪情况下触发。

这是我试过的，

ngOnInit(){
    this.profileForm.valueChanges.subscribe( x => {
      console.log('value changing');
    })
}

这是 stackblitz

上的 code

以下是重现问题的步骤，单击名字，然后单击姓氏，您将看到控制台日志消息。

Answer 1

您可以进行一些黑客攻击来检查表单输入值是否相同。这是更新的 stackblitz。 https://stackblitz.com/edit/angular-7bxnw1

Answer 2

所以，这对我来说是非常奇怪的行为，所以我立即检查了您的自定义 formControl，发现您在调用

  ngAfterContentChecked() {
    this.propagateChange(this.counterValue);
  }

ngAfterContentChecked - Respond after Angular checks the content projected into the directive/component. Called after the ngAfterContentInit() and every subsequent ngDoCheck().

所以，这里的问题是这个钩子在 ngDoCheck

之后调用

ngDoCheck() Detect and act upon changes that Angular can't or won't detect on its own.

Called during every change detection run, immediately after ngOnChanges() and ngOnInit().

所以基本上，每次更改检测运行此表单控件都会发出事件。
您应该从自定义控件中删除它，并且您将保持相同的基本行为，而不会出现无限循环调用您的发射。

监听频繁调用的表单值变化

Listening to form value changes called frequently

angular

angular-reactive-forms