Controllo FormBuilder che causa "Espressione è cambiata dopo che è stato controllato" eccezione

Question

Ho un modulo che viene istanziato in modo programmatico tramite DynamicComponentLoader::loadIntoLocation. Il codice del modulo è qui sotto:

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

Si noterà che alcune delle forme non hanno validatori (per quanto posso dire, questo è lo stesso che utilizzare Validators.nullValidator, ho provato con entrambi) .

Nel mio modello ho il seguente codice (per ogni controllo):

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

Il primo controllo che non dispone di un validatore lancia la seguente eccezione due volte quando colpisce la parte !phone.valid del modello:

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] 

in nessun punto io sono toccando i controlli o this.editForm dopo la creazione iniziale, in modo, per quanto riguarda il mio codice è interessato, nulla deve cambiare.

Sono consapevole che posso eliminare gli errori chiamando enableProdMode() ma preferirei risolvere il problema piuttosto che nasconderlo.

Edit (8 febbraio): Da allora ho provato a spostare il contenuto del modale in una pagina separata, ma gli errori persistono. Questo suggerirebbe che il problema non è legato al modo in cui sto creando e caricando le modali, ma piuttosto al ControlGroup o al FormBuilder.

Plunker of the issue | Plunker without modal

Answer 1

Grazie a qdouble per risolvere questo per me sulla chat Angular Gitter.

Il problema sembrava essere causato dall'ordine in cui l'angolare analizzava la pagina. Andando dall'alto verso il basso, ngIf="!phone.valid" veniva analizzato prima dell'inizializzazione di phone.valid. Questo problema è stato facilmente risolto aggiungendo un'istruzione nell'istruzione if per assicurarsi che non fosse nulla *ngIf="phone.valid === null ? false : !phone.valid" (o spostando l'etichetta dopo l'input).

Answer 2

Questo era il problema in cui mi sono imbattuto.

Angular 2 ha introdotto una funzione per gestire meglio il rilevamento delle modifiche. Angular 2 abbassa i cicli digest a favore del flusso unidirezionale che è circa 3-10 volte più veloce e gestisce meglio la logica asincrona.

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

vicini: angolare di riferimento: https://angular.io/docs/ts/latest/api/core/index/ChangeDetectionStrategy-enum.html

intesa rilevamento delle modifiche: https://auth0.com/blog/understanding-angular-2-change-detection/

Come angolare 2 Change Detection funziona davvero: http://blog.angular-university.io/how-does-angular-2-change-detection-really-work/