EXCEPTION: Expression has changed after it was checked ion-input

Question

i'm trying to create an edit , so i create a form and then i assign the value. But i get an error

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'XXXXXX'.

Here is my edituser.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/Storage';

/**
 * Generated class for the EdituserPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-edituser',
  templateUrl: 'edituser.html',
})
export class EdituserPage {

    fullname : any;
    Deskripsi : any;
    phone:any;
    Email:any;
    user_id:any
  userData = {"username": "","password": "", "fullName": "","Email": "", "Deskripsi" : "", "Phone":""};

  constructor(public navCtrl: NavController, public navParams: NavParams,public storage: Storage) {

  }
ionViewDidLoad() {
      this.storage.get('userData').then((val) => {
               this.fullname = val.fullname;
               this.Deskripsi = val.Deskripsi;
               this.phone = val.phone;
               this.Email = val.Email;
               this.user_id = val.user_id;
        });
  }

  update(){
        console.log(this.userData);
  }


}

and here is my form edituser.html

<ion-list margin-top>
    <ion-item>        
            <ion-label> <ion-icon name="person"></ion-icon></ion-label>
            <ion-input [(ngModel)]="userData.fullname" value="{{fullname}}" type="text"></ion-input>
    </ion-item>

     <ion-item>        
            <ion-label> <ion-icon name="md-phone-portrait"></ion-icon></ion-label>
            <ion-input  [(ngModel)]="userData.phone" value="{{phone}}"  type="text"></ion-input>
    </ion-item>

    <ion-item>        
            <ion-label> <ion-icon name="md-mail"></ion-icon></ion-label>
            <ion-input  [(ngModel)]="userData.Email" value="{{Email}}"  type="text"></ion-input>
    </ion-item>

    <ion-item>        
            <ion-label> <ion-icon name="md-megaphone"></ion-icon></ion-label>
            <ion-textarea  [(ngModel)]="userData.Deskripsi" value="{{Deskripsi}}"  type="text"></ion-textarea>
    </ion-item>

    <ion-item>        
        <button ion-button color="secondary" (click)="update();" float-right>Update</button>
    </ion-item>

</ion-list>

How can i fix this ?

Possible duplicate of [Angular 2 - Expression has changed after it was checked](https://stackoverflow.com/questions/41283293/angular-2-expression-has-changed-after-it-was-checked) — Ramesh Rajendran, Dec 21 '17 at 08:20

score 5 · Accepted Answer · answered Dec 21 '17 at 08:36

5

This error due to angular lifecycle. Run your project with enableProdMode as below.

In your app.module.ts (main component where you define project bootstrapping and other component registration)

import { Component, NgModule, enableProdMode } from "@angular/core";

export class AppModule {

}
enableProdMode();

answered Dec 21 '17 at 08:36

Sandip - Frontend Developer

14,397
4
35
61

Isn't `enableProdMode();` just not outputting the errors? I don't think that this is a viable fix, the error will still happen but it's just not printing it to the console due to the enabled production mode. – moritzg Sep 16 '19 at 11:18
2

As @moritzg said, it's not a fix nor a workaround. It's just hiding the printed error. – Matt Jun 25 '20 at 08:15

score 1 · Answer 2 · answered Dec 21 '17 at 08:13

ionViewDidLoad doesn't seem like the right hook. This sounds like the view is already done loading, which means all the bindings have set. After that you change the bindings, which probably causes this issue.

You should move your storage.get to the ngOnInit life-cycle hook

score 1 · Answer 3 · answered Dec 21 '17 at 08:16

This is a lifecycle error. Angular tells you that during its lifecycle check, you changed a variable, and it got lost.

To avoid that, you can wrap the content of your ionViewDidLoad() into a timeout, or call it somewhere else. By the way, where do you call it ?

EXCEPTION: Expression has changed after it was checked ion-input

3 Answers3