Listening to form value changes called frequently

Issue

I have three from controls,

• firstname,

• LastName

• customformcontrol

The custom formcontrol is a simple counter that increments or decrement a value in an inputbox. I listen to value changes of the whole form .The problem is when i include this the custom form control, The form value changes triggered on some scenario's like when other input tag's get focus or on click of the body of the document or on page scroll. I know the value change is only subscribed to value changes of any of the formcontrols in the form but it also triggers on weird cases as mentioned above.

Here is what i have tried,

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

Here is the code on stackblitz

Here are the steps to reproduce the issue, click on the firstname and then click on lastname and you will see the console log messages.

Solution

So, this was very odd behavior to me, so I immediately checked your custom formControl, and I find out that you calling

  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().

So, the problem here is that this hook calling after 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().

So basically, every change detection run this form control emits the event.
You should delete this from the custom control, and you will remain the same basic behavior without the endless loop that calling your emits.

Answered By - dAxx_