FormBuilder Control causing the Expression after Validation change

Question

I have a form that is created programmatically through DynamicComponentLoader::loadIntoLocation . Form code below:

 constructor ( private _builder: FormBuilder ) { this.editForm = _builder.group({ name: ['', Validators.required], email: ['', Validators.compose([Validators.required, Helpers.emailValidator])], phone: [''], phoneAlt: [''], location: [''], dob: [''], bio: [''], }); } 

You will notice that in some forms there are no validators (as far as I can tell, this is the same as when using Validators.nullValidator , I tested both).

In my template, I have the following code (for each control):

 <label for="phone">Contact Number <span *ngIf="!phone.valid">- {{e(phone)}}</span></label> <input type="text" name="phone" id="phone" ngControl="phone" #phone="ngForm"> 

The first control that does not have a validator throws the following exception twice when it falls into the !phone.valid part of the template:

 EXCEPTION: Expression '!phone.valid in e@15 :43' has changed after it was checked. Previous value: 'true'. Current value: 'false' in [!phone.valid in e@15 :43] 

Under no circumstances will I touch the controls or this.editForm after the initial creation, so nothing should change regarding my code.

I know that I can suppress errors by calling enableProdMode() , but I will fix the problem rather than hide it.

Edit (February 8): Since then I have been trying to move the contents of the modal file to a separate page, but the errors persist. This suggests that the problem is not related to the way I create and load modalities, but rather ControlGroup or FormBuilder.

Plunker Problems | Plunker without modal

Answer 1

Thanks to qdouble for solving this for me in Angular Gitter tea.

The problem seems to be caused by the order in which angular parsed the page. Moving from top to bottom, ngIf="!phone.valid" parsed before phone.valid was initialized. This was easily fixed by adding catch to the if statement to make sure it was not null *ngIf="phone.valid === null ? false : !phone.valid" (or moving the label after input).

Answer 2

That was the problem I encountered.

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

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

Links: Angular Link: 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/