FormBuilder de Contrôle qui provoque “l'Expression a changé après qu'il a été vérifiée” exception
J'ai un formulaire qui est instanciée par programmation via DynamicComponentLoader::loadIntoLocation
. Le code du formulaire est ci-dessous:
constructor (
private _builder: FormBuilder
) {
this.editForm = _builder.group({
name: ['', Validators.required],
email: ['', Validators.compose([Validators.required, Helpers.emailValidator])],
phone: [''],
phoneAlt: [''],
location: [''],
dob: [''],
bio: [''],
});
}
Vous remarquerez que certaines formes n'ont pas de validation d'aussi loin que je peux dire, c'est le même que l'utilisation de Validators.nullValidator
, j'ai testé avec les deux).
Dans mon template, j'ai le code suivant (pour chaque contrôle):
<label for="phone">Contact Number <span *ngIf="!phone.valid">- {{e(phone)}}</span></label>
<input type="text" name="phone" id="phone" ngControl="phone" #phone="ngForm">
Le premier contrôle qui n'a pas un programme de validation déclenche l'exception suivante deux fois quand il frappe les !phone.valid
partie du modèle:
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]
À aucun moment, suis-je toucher les contrôles ou this.editForm
après la création initiale, de sorte que, aussi loin que mon code est concerné, il ne faut rien changer.
Je suis conscient que je peux supprimer les erreurs en appelant enableProdMode()
mais je préfère résoudre le problème que de le cacher.
Modifier (le 8 Février): depuis, j'ai essayé de déplacer le contenu de la modale d'une page séparée, mais les erreurs persistent. Cela pourrait laisser croire que le problème n'est pas lié à la façon dont je suis création et chargement de la modaux, mais plutôt la ControlGroup ou FormBuilder.
Plunker de la question | Plunker sans modal
OriginalL'auteur Tam | 2016-01-26
Vous devez vous connecter pour publier un commentaire.
Grâce à qdouble pour la résolution de ce pour moi sur la Angulaire Gitter chat.
Le problème semble être causé par l'ordre dans lequel angulaire analysé la page. En allant du haut vers le bas,
ngIf="!phone.valid"
a été analysée avantphone.valid
avait été initialisés. Cela a été facilement résolu par l'ajout d'une capture dans l'instruction if pour vérifier qu'elle n'était pas nulle*ngIf="phone.valid === null ? false : !phone.valid"
(ou par le déplacement de l'étiquette après l'entrée).OriginalL'auteur Tam
Tel est le problème que j'ai rencontré.
Angulaire 2 a introduit une fonctionnalité permettant de mieux gérer la détection de changement. Angulaire 2 gouttes de les digérer les cycles en faveur de circulation à sens unique, qui est d'environ 3 à 10 fois plus rapide et poignées en logique asynchrone mieux.
Liens:
Référence Angulaire: https://angular.io/docs/ts/latest/api/core/index/ChangeDetectionStrategy-enum.html
Compréhension de la détection de changement: https://auth0.com/blog/understanding-angular-2-change-detection/
Comment Angulaire 2 Détection De Changement Fonctionne Vraiment: http://blog.angular-university.io/how-does-angular-2-change-detection-really-work/
OriginalL'auteur Tetrapike