Question

我有三个控件，

名字
姓氏
customformcontrol

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

这是我尝试过的，

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

这是code上的闪电战

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

Answer 1

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

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

ngAfterContentChecked -在Angular检查投影到指令/组件中的内容后响应。叫后 ngAfterContentInit（）和随后的所有ngDoCheck（）。

所以，这里的问题是该钩子在ngDoCheck之后调用

ngDoCheck（）检测Angular无法检测到的更改并对其采取行动   自己的。

在每次更改检测运行期间立即调用   ngOnChanges（）和ngOnInit（）。

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

Answer 2

您可以进行一些黑客检查，以检查表单输入值是否不相同。这是更新的堆栈闪电战。 https://stackblitz.com/edit/angular-7bxnw1

聆听频繁调用的表单值更改

2 个答案: