Change detection does not trigger when the formgroup values change

Simply subscribe to the control's valueChanges property in the template using the async pipe, avoiding the need for manually triggering the change detection and subscribing to valueChanges in the component.

<input [formControl]="control"/>
<p>{{control.valueChanges | async}}</p>

You could do something better !, let me know if this works :

when you use reactive forms you can use a really cool method called updateValueAndValidity();

private changeControlValue(control, value: number) {
    control.setValue(value);
    control.updateValueAndValidity();
  }

You can also use this method when updating the validators added to a form, example:

this.control.setValidators([Validators.required, Validators.minLength(5)]);
control.updateValueAndValidity();

This should do the trick ! I think this is one of the best adventages of using reactive forms or form controls against ng-model.

I don't recommend to use valueChanges at your form as you are open to forget to de-subscribe and create a memory leak, even you remember it can be tedious to create this flow.

And remember, when using onPush change detection only three things are going to be detected as changes by Angular:

1- Inputs and Outputs. 2- Html events that the user can do, like (click). 3- Async events like subscriptions.

I hope i helped you !.

I found a workaround to this problem although I am not sure if this is the ideal solution.

We can listen to the form group value changes and then trigger change detection in the input component

this.form.valueChanges.subscribe( () => {
  this.cdr.detectChanges()
});

This way it updates the label values as well along with the inputs.

Here is the solution:

https://stackblitz.com/edit/angular-change-detection-form-group-value-change-issue-resolved

I'm not sure if it's a bug from Angular but happy that I figured out some workaround :)