ion-toggle unnecessarily triggers change event when default value is true

[cubicleWar]

This is reposting of issue #6144 from beta 4 it appears to have made its way back into beta 11

Short description of the problem:

ion-toggle unnecessarily triggers change event when the default value is true

What behavior are you expecting?

The change event should not fire until the user presses the toggle

Steps to reproduce:

1. Create an ion-toggle with ngModel bound to a variable with a default value of true
2. Observe change event firing without any user input

toggle: boolean = true;

<ion-toggle [(ngModel)]="toggle" (ionChange)="onUpdateToggle()">

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

• This appears to be the same issue as ion-toggle unnecessarily triggers change event when default value is true #6144
• This only fires when the default value is true.

Which Ionic Version? 1.x or 2.x

2.0.0-beta.11

Plunker that shows an example of your issue

Note this is the plunk of the original issue there seems to be no plunk template for beta 11 and this is not an issue in beta 10. I have attached a sample project to demonstrate the problem in beta 11

http://plnkr.co/edit/f2NSVLP1DETbkyFmpSN8?p=preview

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0
Ionic App Lib Version: 2.0.0
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.4.5
Xcode version: Xcode 7.3 Build version 7D175

[Greali]

It happens to me too in RC.0! :S Fix please

Same error in old version of ionic:

http://plnkr.co/edit/f2NSVLP1DETbkyFmpSN8?p=preview

[manucorporat]

@jvelo @Greali I can't reproduce this issue in RC0. Can you provide the TS code and markup?

[jvelo]

@manucorporat Yes, I'll try and assemble a test case. FYI for me it appends only with iOS mode.

[manucorporat]

#8578

[Greali]

@manucorporat I have this problem in RC0 too. You can try here http://plnkr.co/edit/f2NSVLP1DETbkyFmpSN8?p=preview .
If you set toogle: as false then the event (change) will be not triggered when the app starts, but as true will be triggered, that's not make sense. I use (ionChange) but same effect. This event must be triggered only when the state of toggle changes.

[7freaks-otte]

Same Problem:
I have an ionToggle with ngModel and an ionChange Event. Once the user clicks the toggle a request is sent to the server. If something goes wrong the toggle should be reset to its previous state. So if I set the value of ngModel in the request callback/catch-Function ionChange gets triggered again and I'm trapped in an infinite loop.

[7freaks-otte]

I wrote a wrapper component as short-term workaround until this is fixed.
Just in case someone is interested:
https://gist.github.com/7freaks-otte/d46bbc2a0c5ad25d1468e3fbb8b0acff

[Greali]

@7freaks-otte Thanks! I hope this problem will be fixed soon. When I have free time I will try your temporary fix :) thanks again

[abierbaum]

This is happening for my application as well.

[no1done]

I was having a similar issue with a pushed page triggering the ionChange event when the value was true.

[(ngModel)]="item.enabled" (ionChange)="toggleEnabled(item.id)"

The console log showed that after page load, it ran through each item and fired the ionChange event.

I've managed to work around this by using the angular ngModelChange option and splitting the two way binding for the model. It's not ideal but it's working.

[ngModel]="item.enabled" (ngModelChange)="toggleEnabled(item.id)"

This is with ionic 2.2.1

[kr105]

I had the issue that @7freaks-otte described (the infinite loop) and @no1done 's changes fixed it, thanks!

[ajaygupta7]

Thanks, @no1done it's a great solution for me...!!!

[ghost]

Thanks @no1done, that problem was so annoying, hope they fix soon!

[daveywc]

I had a similar issue with the ionChange event firing for a radioGroup when I initalized the page and set the bound value. Did not matter if the inital value was true or false. I resolved the issue by changing to use the ngModelChange binding instead.

[fdambrosio]

I have the same problem with Ionic 3.7.1

[7freaks-otte]

@fdambrosio To be honest, I haven't checked yet in Ionic 3.7.1 though I'm already using it. In special cases where I need that change event on a toggle I still rely on my workaround. Just updated the GIST to the version that I'm currently using with 3.7.1: https://gist.github.com/7freaks-otte/d46bbc2a0c5ad25d1468e3fbb8b0acff

[cmer4]

ionic 3.9.2 - we still have this issue across many components...in my app its ion-range. And the same story...

[Devqon]

Still happening in Ionic V4. Sadly the workaround @no1done mentioned doesn't seem to work here though. I have a http request fired when toggling a button, but it also listens to an open socket, so the request will be triggered again and again to infinity.

[Devqon]

For those who are struggling with this in Ionic 4, the events have changed a bit. This works in v4:

@Component({
    template: '<ion-toggle (ionChange)="changed($event)" [(ngModel)]="value"></ion-toggle>'
})
export class MyComponent {

    value = false;

    changed(evt) {
        // the 'checked' value now is on $event.detail.value
        // instead of '$event.checked'
        if (evt.detail.value !== this.value) {
            // do things
        }
    }
}

[ionitron-bot]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot]

Issue moved to: ionic-team/ionic-v3#127