IONIC Checkbox change and ngModel event

Ionic Framework ionic-v3
1

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.

2

you should have a control with name ‘rmchecked’

3

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

1 Like
4

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

5

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

6

Why do you have both formControlName and ngModel?

2 Likes
7

Because am using form validation so am using formControllName.

8

Give me some sample code @Thavarajan

9

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

10

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

11

Please give some example @Thavarajan

12

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

13

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

14

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

15

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

1 Like
16

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

17

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

18

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