Ionic-framework: Ionic 4 Toggle ngModel does not work and checked handle does not exist

[phamconganh]

Bug Report

Ionic version:


[x] 4.x

Current behavior:
My project uses ion-toggle and i set value checked of this tag by variable and some trigger.
But when ionChange event run, i change value of variable by two-way binding, it not change in UI, i try with checked handle but the handle was off in #17012
In ionic framework docs, there are not any guide of this issue, can body have some solutions for my problem?

Related code:

in UI html

<ion-toggle [(ngModel)]="var1" mode="ios" 
        color="success" (ionChange)="change($event)">
</ion-toggle>

In ts first code

change(e){
       if(this.var1 == false && this.var2 == false){
              e.checked = true;
       }
}

In ts second code

change(e){
       if(this.var1 == false && this.var2 == false){
              this.var1 = true;
       }
}

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.3 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.1.1
   @angular-devkit/build-angular : 0.13.6
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.6
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (10 plugins total)

System:

   Android SDK Tools : 26.1.1 (/home/conganhpham/sdk-tools-linux-4333796)
   NodeJS            : v8.10.0 (/usr/bin/node)
   npm               : 6.8.0
   OS                : Linux 4.15

[liamdebeasi]

Hi there,

Thanks for the issue. Can you provide a repository with the code required to reproduce this issue?

Thanks!

[phamconganh]

this is example in my problem
https://github.com/phamconganh/ionic-toggle.git
I want to have at least one toggle is checked
It mean toggle 1,2,3 off and toggle 4 can not off
In ionic 3 and just: event.check = true;
But in ionic 4, the handle of checked is off
When turn of toggle 1,2,3 then turn off toggle 4 anf toggle 1,2,3 turn on
But after that, turn off toggle 3,2,1, there are not any toggle turn on

[liamdebeasi]

Hi there,

Thanks for the follow up. I was able to reproduce the issue. We will look into it!

As a temporary workaround, you can do:

setTimeout(() => {
  this.var1 = true;
  this.var2 = true;
  this.var3 = true;
  this.var4 = true;
 }, 0);

This approach should be removed when this bug gets fixed, but it should do the job for now.

Thanks for using Ionic!

[phamconganh]

Tks for your help. It works. I hope this bug will fixed soon and the handle checked will be on in the next version of ionic

[liamdebeasi]

Hi there,

I am going to keep this open until we can get a fix in place.

Thanks!

[phamconganh]

hi @liamdebeasi, is this bug fixed? with ion-checkbox, although checkbox has property checked, but it bug too

[liamdebeasi]

Hi there,

No, not yet. I will post an update here when the issue have been resolved.

Thanks!

[saladgg]

@phamconganh ,
As of ionic 4, you access checked by adding .detail to the change method params;
color="success" **(ionChange)="change($event.detail)"**>

[C-racker]

Hi there,

Thanks for the follow up. I was able to reproduce the issue. We will look into it!

As a temporary workaround, you can do:

setTimeout(() => {
  this.var1 = true;
  this.var2 = true;
  this.var3 = true;
  this.var4 = true;
 }, 0);

This approach should be removed when this bug gets fixed, but it should do the job for now.

Thanks for using Ionic!

I have encountered the same problem, which can be solved by using your method, but it is not the best solution. I would like to know when this problem can be fixed in the official version?

[Felix-O]

@phamconganh ,
As of ionic 4, you access checked by adding .detail to the change method params;
color="success" **(ionChange)="change($event.detail)"**>

If you're going to double bind with [(ngModel)] you should change

(ionChange)="change($event.detail)

to

(click)="change($event.detail).

Otherwise the change in var1 will trigger an event which will trigger (ionChange) again. You can see how you'll get caught in an event loop.