How to find which property is throwing ExpressionChangedAfterItHasBeenCheckedError; Previous value for 'ng-valid': 'false'. Current value: 'true'

Question

How do I the following error... Can someone help me troubleshoot it?

ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'ng-valid': 'false'. Current value: 'true'.. Find more at https://angular.io/errors/NG0100
    at throwErrorIfNoChangesMode (core.js:6757)
    at bindingUpdated (core.js:12967)
    at checkStylingProperty (core.js:16757)
    at ɵɵclassProp (core.js:16665)
    at NgControlStatusGroup_HostBindings (forms.js:1327)
    at processHostBindingOpCodes (core.js:9213)
    at refreshView (core.js:9491)
    at refreshComponent (core.js:10616)
    at refreshChildComponents (core.js:9242)
    at refreshView (core.js:9495)

1. How do I figure out which property is throwing this?
2. Is it .valid property of a reactive form that is doing this?
3. What tools do you use to troubleshoot? the stack trace on chrome devTools is very unhelpful, it just points to various angular core.js components. See printout: enter image description here
4. The only way I know is to delete various components and see when the error stops, but it's very frustrating.

Thank you!

Bearden

The error points to a link which might be useful to understand more about the error. – Steiermark

The link isn't very helpful. In my case it is an ion-input added to a form per user click request. ng-valid (I can only guess that this refers to the form control) starts out with true but once the ion-input is realised on screen, it seems to notice, ooops, invalid start value, so ng-valid goes to false. – Outofdoor

I'm also getting this error and I can't figure out where is coming from. It happens randomly. I think it comes from some library – Hypaethral

Answer 1

Looking at your call stack, it looks like the problem list in NgControlStatusGroup_HostBindings.

Found the answer here. The 6+ minute video explains how to find the source of the error. The narrator goes on to say that the issue is usually caused by using ngAfterViewInit instead of ngOnInit.

This change worked for me and caused other issues, but at least it gave the ability to narrow down the problem and fix it.

Update

After finally getting to the bottom of this there was a boolean value in app.component.ts being read by an object in the HTML template then the object immediately below it called a method that changed the value.

By clicking the app.component.html link (circled in the above image) in chrome dev tools console, it took me right to where the issue was. Resolved it by moving the offending object higher in the template.

Fable