Ion-checkbox and ion-toggle are checked by default

Ionic Framework
1

Hello,
This is my post here :smiley:

First my config

Ionic version
5.4.9

ng --version

Angular CLI: 8.1.3
Node: 12.11.1
OS: darwin x64
Angular: 8.1.3
… cli, common, compiler, compiler-cli, core, forms
… language-service, platform-browser, platform-browser-dynamic
… router

Package Version

@angular-devkit/architect 0.801.3
@angular-devkit/build-angular 0.801.3
@angular-devkit/build-optimizer 0.801.3
@angular-devkit/build-webpack 0.801.3
@angular-devkit/core 8.1.3
@angular-devkit/schematics 8.1.3
@ngtools/webpack 8.1.3
@schematics/angular 8.1.3
@schematics/update 0.801.3
rxjs 6.5.3
typescript 3.4.5
webpack 4.35.2

I have a problem when I use ion-checkbox and ion-toggle components.
It seems, as per documentation, checked is false by default, but when use one of these by default is checked.

Example:

<ion-toggle></ion-toggle>

Is rendered active(checked = true)

If I put checked=“false” nothing happens.

Anyone have a clue about this?

Thanks!!

2

Try this way may help you.

<ion-toggle [(ngModel)]="toggle.contact" formControlName="contact" id="contact" checked="false">Contactable</ion-toggle>

In ts file,
toggle.contact = false;

3

Hello @Priyanka34,
Yess, it works for me, but I still think it’s a bug.

4

Well then remove the node module folder and add it again using this cmd: npm i and if not work after this then post your issue here with your project details.

5

@gokujy Ok, many thanks!

6

Tested. Deleted the node_modules and I ran npm i.

All ok.

Cheers.

7

There are too many proverbial cooks in the accepted kitchen. Choose only one of ngModel, a form control binding, and the checked attribute. Putting more than one on the same element is asking for phase-of-the-moon problems with expressions changing after they’ve been checked.

8

Your Welcome :slightly_smiling_face: @benetj