IONIC Checkbox change and ngModel event

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.

you should have a control with name ‘rmchecked’

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

1 Like

use this resource https://ionicframework.com/docs/v2/resources/forms/

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

Why do you have both formControlName and ngModel?

1 Like

Because am using form validation so am using formControllName.

Give me some sample code @Thavarajan

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

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

Please give some example @Thavarajan

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

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

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

http template file contains:

<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

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

1 Like

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

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

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