FormBuilder Control powodujące "Wyrażenie zmieniło się po sprawdzeniu" wyjątek

Question

Mam formularz, który jest tworzony programowo przez DynamicComponentLoader::loadIntoLocation. Kod forma jest poniżej:

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

Zauważysz, że niektóre z tych form nie mają weryfikatorów (o ile mogę powiedzieć, to jest taki sam jak przy użyciu Validators.nullValidator, Przetestowałem z obu) .

W moim szablonu Mam następujący kod (dla każdej kontroli):

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

Pierwsza kontrola, która nie posiada walidator rzuca następujący wyjątek dwukrotnie, gdy uderza !phone.valid częścią szablonu:

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] 

w żadnym momencie jestem dotykając kontroli lub this.editForm po początkowym stworzeniu, tak, tak daleko, jak mój kod jest zaniepokojony, nic nie powinno się zmieniać.

Jestem świadomy, że mogę stłumić błędy, dzwoniąc pod numer enableProdMode(), ale wolę rozwiązać problem, niż go ukryć.

Edit (08 lutego): mam od próbował przesuwając zawartość modalnym do osobnej stronie, ale błędy utrzymywać. Sugerowałoby to, że problem nie jest związany ze sposobem, w jaki kreuję i ładowaniem modałów, ale raczej z ControlGroup lub FormBuilder.

Plunker of the issue | Plunker without modal

Answer 1

Dzięki qdouble za rozwiązanie tego problemu na czacie Angular Gitter.

Problem wydawał się być spowodowany kolejnością, w której kątowy analizował stronę. Przechodząc od góry do dołu, przetwarzano ngIf="!phone.valid" przed zainicjowaniem phone.valid. Można to łatwo naprawić, dodając opcję catch w instrukcji if, aby upewnić się, że nie jest pusta *ngIf="phone.valid === null ? false : !phone.valid" (lub przesuwając etykietę po wprowadzeniu).

Answer 2

To był problem, na który wpadłem.

Angular 2 wprowadził funkcję, która lepiej radzi sobie z wykrywaniem zmian. Angular 2 upuszcza cykle trawienia na korzyść przepływu jednokierunkowego, który jest około 3-10 razy szybszy i lepiej radzi sobie z logiką asynchroniczną.

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

Linki: kątowy Numer referencyjny: https://angular.io/docs/ts/latest/api/core/index/ChangeDetectionStrategy-enum.html

Zrozumienie wykrywania zmian: https://auth0.com/blog/understanding-angular-2-change-detection/

Jak kątowa 2 Wykrywanie Zmień naprawdę działa: http://blog.angular-university.io/how-does-angular-2-change-detection-really-work/