FormBuilder Control causing "Expression has changed after it was checked" exception

Thanks to qdouble for solving this for me on the Angular Gitter chat.

The issue seemed to be caused by the order in which angular parsed the page. By going from top to bottom, ngIf="!phone.valid" was being parsed before phone.valid had been initialised. This was easily fixed by adding a catch in the if statement to make sure that it was not null *ngIf="phone.valid === null ? false : !phone.valid" (or by moving the label after the input).

This was the problem I ran into.

Angular 2 introduced a feature to better handle change detection. Angular 2 drops the digest cycles in favor of one-way flow which is about 3-10 times faster and handles asynchronous logic better.

@Component({
    ...
    changeDetection: ChangeDetectionStrategy.OnPush
})...

Links: Angular Reference: https://angular.io/docs/ts/latest/api/core/index/ChangeDetectionStrategy-enum.html

Understanding change detection: https://auth0.com/blog/understanding-angular-2-change-detection/

How Angular 2 Change Detection Really Works: http://blog.angular-university.io/how-does-angular-2-change-detection-really-work/