ion-checkbox two way binding doesn't work with ngModel

[lfxsantos]

Ionic version: (check one with "x")
[x ] 3.7.1

I'm submitting a ... (check one with "x")
[X] bug report

I have a list of checkboxes and the user has a max limit to select. Exemple: Select 3 of 5 options.

I want to give him a warn when he try to select the fourth checkbox and unselect it.

I'm tryng something like that to unselect:

<ion-checkbox [(ngModel)]="teste" (ionChange)="updateTest()">

updateTest(){
console.log(this.teste); //true
this.teste = false;
console.log(this.teste); //false
}

But on screen the checkbox continue checked (true).

I'm doing something wrong?

Tks,
Filipe

[kensodemann]

Hello! Thank you for opening an issue with us!

The Ionic Framework issues list is designated for the reporting of bugs with the Ionic Framework or for requesting new features. As this seems like more of a support question I am going to close this issue.

I urge that you ask future questions like this on our forum or on our slack channel.

In your particular case, the following "two way" binding:

<ion-checkbox [(ngModel)]="teste"></ion-checkbox>

is actually short-hand for this:

<ion-checkbox [ngModel]="teste" (ngModelChange)="teste = !teste"></ion-checkbox>

See this post for a pretty good write-up on how two-way bindings work in Angular.

Then you add your updateTest() binding on top of that, and you have the equivalent of:

<ion-checkbox [ngModel]="teste" (ngModelChange)="teste = !teste" (ionChange)="updateTest()"></ion-checkbox>

So now you have two things mucking with the value of teste, and perhaps even firing each other in an infinite loop.

If you just want the teste to toggle, then only use the two-way binding:

<ion-checkbox [(ngModel)]="teste"></ion-checkbox>

If you are trying to do something fancier, then you should post a question with exactly what you are trying to do on our forum or on our slack channel.

Thanks for using Ionic!

[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.