bug: Toggle call ionChange on view init

[MatanYadaev]

Type: bug

Ionic Version: 2.x

Platform: all

This is my toggle:
<ion-toggle [(ngModel)]="workMode" (ionChange)="workModeChanged()">

if this.workMode == true so workModeChanged callback will called on page init, even without click on the toggle. that is the bug.
if this.workMode == false there is no bug.

Thanks

[jgw96]

Hello! Thanks for opening an issue with us! As this seems like more of a support question i will urge that you ask this question on our forum. Thanks for using Ionic!

[MatanYadaev]

@jgw96 That is not abouy support its a bug...

[jgw96]

Hello @MatanYed sorry for the misunderstanding! Would you mind sharing a code sample that i can use to reproduce this issue? Thanks!

[MatanYadaev]

@jgw96 i am sorry i am from the phone so i cant put here code
But just create 2 pages
In the second page put ion toggle with ng model and ion change event
When you enter the second page and ngModel is true, ionChange event will fire
It shouldnt fire because the page only initialized

[jgw96]

No problem, thanks! Are you initializing the value ngModel is bound too on the second page?

[lorenzob-incomedia]

Hi,
same issue for me. ionChange is fired on init if the ngModel evaluation is true.
In my case for the toggle component there is two-way data binding like that:

<ion-toggle primary [(ngModel)]="currentSite.usersNotifications" (ionChange)="preferenceChanged()"></ion-toggle>

The model currentSite is initialized in the constructor using a parameter of the view like that:

private currentSite: SiteModel = null;
constructor(public nav: NavController, public navParams: NavParams) { this.currentSite = navParams.get('site'); }

Hope this help.
Thanks!

[manucorporat]

I can't reproduce this issue, in fact it was already fixed a long time ago:
#6144

What version of ionic are you using?
Closing issue until additional info is provided. Maybe a repo?

[mcwienczek]

I can reproduce the issue again on Ionic 3. I have fetched the value from backend and set the field in both constructor and ngOnInit. Both ways cause event to fire.

Ionic version:

"ionic-angular": "3.0.1"

Constructor code:

constructor(

private navCtrl: NavController,
private popoverCtrl: PopoverController,
private userService: UserService,
private toastHelper: ToastHelper) {
  this.userService.getUser().subscribe(
  user => {
    this.disableAccount = user.disableAccount;
  },
  err => {
    this.toastHelper.showTranslatedToast('connection.serverUnavailable');
    console.log(err);
  }
);

}

HTML:

<ion-item>
<ion-label>Disable account</ion-label>
<ion-toggle [(ngModel)]="disableAccount" (ionChange)="toggleDisableAccount()" checked="false"></ion-toggle>
</ion-item>

[manucorporat]

I can reproduce the issue again on Ionic 3. I have fetched the value from backend and set the field in both constructor and ngOnInit

but this is not a sync task... the value is changed before the component is initialized

[mcwienczek]

I have just refactored code so that I don't have async HTTP request anymore. It's just simple value assignment now.

ngOnInit() {
      this.user = this.userService.user;
  }

still fires the event though...

[manucorporat]

@VSMax can you update to 3.1?

[mcwienczek]

Sure, I will let you know soon if the issue still exists.

[mcwienczek]

Upgraded to Ionic 3.1, my packages now:

"dependencies": {
    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/compiler-cli": "4.0.2",
    "@angular/core": "4.0.2",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@ionic-native/core": "3.4.4",
    "@ionic-native/splash-screen": "3.4.4",
    "@ionic-native/status-bar": "3.4.4",
    "@ionic-native/app-version": "3.4.4",
    "@ionic-native/camera": "3.4.4",
    "@ionic-native/network": "3.4.4",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.1.0",
    "ionicons": "3.0.0",
    "@angular/animations": "4.0.2",
    "@angular/platform-server": "4.0.2",
    "@ngx-translate/core": "^6.0.1",
    "@ngx-translate/http-loader": "0.0.3",
    "@types/cordova-plugin-globalization": "0.0.3",
    "decimal.js": "^7.1.1",
    "moment": "2.18.1",
    "rxjs": "5.3.0",
    "sockjs": "^0.3.15",
    "sockjs-client": "^1.1.1",
    "stompjs": "^2.3.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.5"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.4",
    "gulp": "^3.9.1",
    "typescript": "2.2.2"
  },

but the problem still remains

[mcwienczek]

After upgrading to 3.1.1 issue is fixed.

[austinemayer]

@mcwienczek I am now on Ionic 3.2.0 and this is still an issue for me.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.