# IONIC Checkbox change and ngModel event

**URL:** <https://forum.ionicframework.com/t/ionic-checkbox-change-and-ngmodel-event/71482>\
**Category:** ionic-v3\
**Created:** [November 27, 2016, 1:41pm UTC](https://forum.ionicframework.com/t/ionic-checkbox-change-and-ngmodel-event/71482 "2016-11-27T13:41:00Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![ManivannanDurairaj](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@ManivannanDurairaj](https://forum.ionicframework.com/u/ManivannanDurairaj)\
**Post date:** [November 27, 2016, 1:41pm UTC](https://forum.ionicframework.com/t/ionic-checkbox-change-and-ngmodel-event/71482/1 "2016-11-27T13:41:00Z")

</div>

Hi Guys, am creating login form in ionic 2 but i have some error i don’t know how to solve. Please help me how to use ionic 2 checkbox and ngModel value binding and ionchange event.  
\*\* My Ion View \*\*

\<form [formGroup]=“loginfrm” (ngSubmit)=“btnLoginClick()” novalidate\>

```
    <ion-label floating> Username </ion-label>
    <ion-input name="username" type="text" [(ngModel)]="username" formControlName="username"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Remember Me</ion-label>
    <ion-checkbox color="primary" [(ngModel)]="rmchecked" (ionChange)="LoginRemCheck(rmchecked)" formControlName="rmchecked"></ion-checkbox>
  </ion-item>
  <button ion-button full block type="submit" [disabled]="!loginfrm.valid"> Login </button>
</ion-list>

```

\*\* My controller \*\*  
this.loginfrm = this.formBuilder.group({  
“username”: ["", Validators.required],  
“password”: ["", Validators.required]  
});

LoginRemCheck(isChecked) {  
isChecked = true;  
}

\*\* ERROR \*\*  
\*\*  
**Error: Cannot find control with name: ‘rmchecked’**  
\*\* at \_throwError (\F:\IonicExamples\MyApp2\node\_modules@angular\forms\src\directives\shared.js:102:11)\*\*  
\*\* at setUpControl (\F:\IonicExamples\MyApp2\node\_modules@angular\forms\src\directives\shared.js:40:9)\*\*  
\*\* at FormGroupDirective.addControl (\F:\IonicExamples\MyApp2\node\_modules@angular\forms\src\directives\reactive\_directives\form\_group\_directive.js:109:93)\*\*  
\*\* at FormControlName.\_setUpControl (\F:\IonicExamples\MyApp2\node\_modules@angular\forms\src\directives\reactive\_directives\form\_control\_name.js:164:44)\*\*  
\*\* at FormControlName.ngOnChanges (\F:\IonicExamples\MyApp2\node\_modules@angular\forms\src\directives\reactive\_directives\form\_control\_name.js:110:18)\*\*  
\*\* at Wrapper\_FormControlName.detectChangesInternal (/ReactiveFormsModule/FormControlName/wrapper.ngfactory.js:44:18)\*\*  
\*\* at \_View\_LoginPage0.detectChangesInternal (/AppModule/LoginPage/component.ngfactory.js:553:30)\*\*  
\*\* at \_View\_LoginPage0.AppView.detectChanges (\F:\IonicExamples\MyApp2\node\_modules@angular\core\src\linker\view.js:243:14)\*\*  
\*\* at \_View\_LoginPage0.DebugAppView.detectChanges (\F:\IonicExamples\MyApp2\node\_modules@angular\core\src\linker\view.js:348:44)\*\*  
\*\* at \_View\_LoginPage\_Host0.AppView.detectViewChildrenChanges (\F:\IonicExamples\MyApp2\node\_modules@angular\core\src\linker\view.js:269:19)o @ polyfills.js:3r @ polyfills.js:3i @ polyfills.js:3\*\*  
**polyfills.js:3 Error: Uncaught (in promise): Error: Error in ./LoginPage class LoginPage - inline template:31:38 caused by: Cannot find control with name: ‘rmchecked’**

Thanks guys.

---

<div class="post-metadata">

**Author:** ![sergi95](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sergi95/32/104959_2.png) [@sergi95](https://forum.ionicframework.com/u/sergi95)\
**Post date:** [November 27, 2016, 1:46pm UTC](https://forum.ionicframework.com/t/ionic-checkbox-change-and-ngmodel-event/71482/2 "2016-11-27T13:46:11Z")

</div>

> [@ManivannanDurairaj](#):
>
> Error: Cannot find control with name: ‘rmchecked’

you should have a control with name ‘rmchecked’

---

<div class="post-metadata">

**Author:** ![ManivannanDurairaj](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@ManivannanDurairaj](https://forum.ionicframework.com/u/ManivannanDurairaj)\
**Post date:** [November 27, 2016, 1:47pm UTC](https://forum.ionicframework.com/t/ionic-checkbox-change-and-ngmodel-event/71482/3 "2016-11-27T13:47:18Z")

</div>

[(ngModel)]=“rmchecked” (ionChange)=“LoginRemCheck(rmchecked)” formControlName="rmchecked"  
am using this in html

---

<div class="post-metadata">

**Author:** ![sergi95](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sergi95/32/104959_2.png) [@sergi95](https://forum.ionicframework.com/u/sergi95)\
**Post date:** [November 27, 2016, 2:03pm UTC](https://forum.ionicframework.com/t/ionic-checkbox-change-and-ngmodel-event/71482/4 "2016-11-27T14:03:13Z")

</div>

use this resource [https://ionicframework.com/docs/v2/resources/forms/](https://ionicframework.com/docs/v2/resources/forms/)

---

<div class="post-metadata">

**Author:** ![Thavarajan](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/thavarajan/32/103608_2.png) [@Thavarajan](https://forum.ionicframework.com/u/Thavarajan)\
**Post date:** [November 27, 2016, 5:24pm UTC](https://forum.ionicframework.com/t/ionic-checkbox-change-and-ngmodel-event/71482/5 "2016-11-27T17:24:28Z")

</div>

hi @ManivannanDurairaj  
you are right you did it in html, but you miss it in controller add the control in formgroup

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [November 27, 2016, 7:12pm UTC](https://forum.ionicframework.com/t/ionic-checkbox-change-and-ngmodel-event/71482/6 "2016-11-27T19:12:22Z")

</div>

Why do you have both `formControlName` and `ngModel`?

---

<div class="post-metadata">

**Author:** ![ManivannanDurairaj](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@ManivannanDurairaj](https://forum.ionicframework.com/u/ManivannanDurairaj)\
**Post date:** [November 28, 2016, 4:44am UTC](https://forum.ionicframework.com/t/ionic-checkbox-change-and-ngmodel-event/71482/7 "2016-11-28T04:44:06Z")

</div>

Because am using form validation so am using formControllName.

---

<div class="post-metadata">

**Author:** ![ManivannanDurairaj](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@ManivannanDurairaj](https://forum.ionicframework.com/u/ManivannanDurairaj)\
**Post date:** [November 28, 2016, 4:48am UTC](https://forum.ionicframework.com/t/ionic-checkbox-change-and-ngmodel-event/71482/8 "2016-11-28T04:48:50Z")

</div>

Give me some sample code @Thavarajan

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [November 28, 2016, 5:04am UTC](https://forum.ionicframework.com/t/ionic-checkbox-change-and-ngmodel-event/71482/9 "2016-11-28T05:04:49Z")

</div>

Why not just get the value from the control then? Seems weird to have both.

---

<div class="post-metadata">

**Author:** ![Thavarajan](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/thavarajan/32/103608_2.png) [@Thavarajan](https://forum.ionicframework.com/u/Thavarajan)\
**Post date:** [November 28, 2016, 6:58am UTC](https://forum.ionicframework.com/t/ionic-checkbox-change-and-ngmodel-event/71482/10 "2016-11-28T06:58:52Z")

</div>

well you just remove the ngmodel and formcontrolname  
and bind the checked property to your variable  
that’s aLL

---

<div class="post-metadata">

**Author:** ![ManivannanDurairaj](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@ManivannanDurairaj](https://forum.ionicframework.com/u/ManivannanDurairaj)\
**Post date:** [November 28, 2016, 7:00am UTC](https://forum.ionicframework.com/t/ionic-checkbox-change-and-ngmodel-event/71482/11 "2016-11-28T07:00:54Z")

</div>

Please give some example @Thavarajan

---

<div class="post-metadata">

**Author:** ![Thavarajan](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/thavarajan/32/103608_2.png) [@Thavarajan](https://forum.ionicframework.com/u/Thavarajan)\
**Post date:** [November 28, 2016, 7:02am UTC](https://forum.ionicframework.com/t/ionic-checkbox-change-and-ngmodel-event/71482/12 "2016-11-28T07:02:29Z")

</div>

hi @ManivannanDurairaj,  
you provide your code using a plunker,  
i will solve your issue

---

<div class="post-metadata">

**Author:** ![ManivannanDurairaj](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@ManivannanDurairaj](https://forum.ionicframework.com/u/ManivannanDurairaj)\
**Post date:** [November 29, 2016, 8:28am UTC](https://forum.ionicframework.com/t/ionic-checkbox-change-and-ngmodel-event/71482/13 "2016-11-29T08:28:51Z")

</div>

Thanks @Thavarajan Finally am resolved the issue. Thanks for all. Please keep in touch.

---

<div class="post-metadata">

**Author:** ![john\_hohm](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/john_hohm/32/107303_2.png) [@john\_hohm](https://forum.ionicframework.com/u/john_hohm)\
**Post date:** [March 1, 2017, 1:37am UTC](https://forum.ionicframework.com/t/ionic-checkbox-change-and-ngmodel-event/71482/14 "2017-03-01T01:37:13Z")

</div>

I have a very similar issue that is:  
I cannot get ngmodel to update my variable “showSlides”

http template file contains:

````http
<ion-slides [hidden]="!showSlides" pager>
    ...
      <ion-item>
        <ion-label>Show Slides at startup</ion-label>
        <ion-checkbox checked="showSlides" ([ngModel])="showSlides"></ion-checkbox>
      </ion-item>
      <p>{{showSlides}}</p>
    </ion-slide>
  </ion-slides>```

component file contains:
```typescript
import { ViewChild, Component } from '@angular/core';

@Component({
  selector: 'page-explore-eggs',
  templateUrl: 'explore-eggs.html'
})
export class ExploreEggsPage {
...
  showSlides: boolean = true;
...

````

I have more code that uses"showSlides" later but even checking and unchecking the **ion-checkbox** fails to update “showSlides” printout in the **p** , I have also checked with the console at run time and the variable value does not change. I would greatly appreciate any pointers.

thanks  
John

---

<div class="post-metadata">

**Author:** ![john\_hohm](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/john_hohm/32/107303_2.png) [@john\_hohm](https://forum.ionicframework.com/u/john_hohm)\
**Post date:** [March 1, 2017, 3:03am UTC](https://forum.ionicframework.com/t/ionic-checkbox-change-and-ngmodel-event/71482/15 "2017-03-01T03:03:16Z")

</div>

OK, my face is red…😊  
my “banana” was outside my “box” `([ngmodel])`

---

<div class="post-metadata">

**Author:** ![alvinchettiar](https://avatars.discourse-cdn.com/v4/letter/a/dc4da7/32.png) [@alvinchettiar](https://forum.ionicframework.com/u/alvinchettiar)\
**Post date:** [August 26, 2017, 1:25pm UTC](https://forum.ionicframework.com/t/ionic-checkbox-change-and-ngmodel-event/71482/16 "2017-08-26T13:25:11Z")

</div>

Resolved my question of how to use onchange event. Thank you.

---

<div class="post-metadata">

**Author:** ![Oyarzun](https://avatars.discourse-cdn.com/v4/letter/o/85e7bf/32.png) [@Oyarzun](https://forum.ionicframework.com/u/Oyarzun)\
**Post date:** [June 4, 2019, 2:15pm UTC](https://forum.ionicframework.com/t/ionic-checkbox-change-and-ngmodel-event/71482/17 "2019-06-04T14:15:10Z")

</div>

@Thavarajan could you send me the code with which I solve the problem?

---

<div class="post-metadata">

**Author:** ![Oyarzun](https://avatars.discourse-cdn.com/v4/letter/o/85e7bf/32.png) [@Oyarzun](https://forum.ionicframework.com/u/Oyarzun)\
**Post date:** [June 4, 2019, 2:34pm UTC](https://forum.ionicframework.com/t/ionic-checkbox-change-and-ngmodel-event/71482/18 "2019-06-04T14:34:09Z")

</div>

@ManivannanDurairaj could you send me the code with which I solve the problem?