FormBuilder Control verursacht "Ausdruck hat sich geändert, nachdem es überprüft wurde" Ausnahme

Question

Ich habe ein Formular, das programmgesteuert über DynamicComponentLoader::loadIntoLocation instanziiert wird. Die Codeform ist unter:

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

Sie werden bemerken, dass einige der Formen haben keine Validatoren (soweit ich das beurteilen kann, dies ist das gleiche wie mit Validators.nullValidator ich mit beiden getestet habe) .

In meiner Vorlage ich den folgenden Code haben (für jede Kontrolle):

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

Die erste Kontrolle, die keinen Validator hat wirft die folgende Ausnahme zweimal, wenn es trifft den !phone.valid Teil der Vorlage:

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] 

zu keinem Zeitpunkt ist ich die Kontrollen oder this.editForm nach der ersten Schöpfung zu berühren, so, so weit wie mein Code betrifft, so sollte nichts ändert werden.

Ich bin mir bewusst, dass ich die Fehler unterdrücken kann, indem ich enableProdMode() aufrufen, aber ich würde lieber das Problem beheben, als es zu verstecken.

Bearbeiten (8. Feb): Ich habe seit dem versucht, den Inhalt des Modals auf eine separate Seite zu verschieben, aber die Fehler bestehen fort. Dies würde darauf hindeuten, dass das Problem nicht mit der Art und Weise zusammenhängt, wie ich die Modals erstelle und lade, sondern vielmehr mit der ControlGroup oder dem FormBuilder.

Plunker of the issue | Plunker without modal

Answer 1

Dank qdouble für die Lösung für mich auf dem Angular Gitter Chat.

Das Problem schien durch die Reihenfolge verursacht, in der eckig die Seite analysierte. Wenn Sie von oben nach unten gehen, wird ngIf="!phone.valid" analysiert, bevor phone.valid initialisiert wurde. Dies wurde leicht durch Hinzufügen eines Catch in der if-Anweisung behoben, um sicherzustellen, dass es nicht Null war *ngIf="phone.valid === null ? false : !phone.valid" (oder durch Verschieben der Beschriftung nach der Eingabe).

Answer 2

Dies war das Problem, in das ich geriet.

Angular 2 führte eine Funktion ein, um die Erkennung von Änderungen besser zu handhaben. Angular 2 lässt die Digest-Zyklen zugunsten der Einwegströmung fallen, die 3-10-mal schneller ist und asynchrone Logik besser handhabt.

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

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

Legendes Änderungserkennung: https://auth0.com/blog/understanding-angular-2-change-detection/

Wie Angular 2 Änderungserkennung funktioniert wirklich: http://blog.angular-university.io/how-does-angular-2-change-detection-really-work/