Checkbox validation

Ionic Framework ionic-v3
1

Hi,

I’ve tried to implement checkbox validation in a simple form, but something won’t work properly. The problem is, the checkbox changes the valid state once. If it was initially invalid while unchecked and changes state to valid after checked, it won’t switches back to invalid if unchecking.

Here is the code in HTML:

<ion-item>
  <ion-label floating>Document number</ion-label>
  <ion-input #termsAccepted="ngForm" ngControl="termsAccepted" type="checkbox"></ion-input>
</ion-item>

And .ts:

this.userContractForm = formBuilder.group({
  termsAccepted: ['', Validators.required],
})

Any one an idea why it’s won’t work?

Thanks!

1 Like
2

Where you use your userContractForm model?

3

The model is in the constructor and ion-item tree inside
<form [ngFormModel]="userContractForm"></form>

The validation is working if I try it with simple <ion-input> but just work once with <ion-checkbox>

4

Try remove #termsAccepted="ngForm", you no need it.
And also use false instead of ''

5

Not sure why you’re using an ion-input here, the correct form element would be ion-checkbox

<ion-item>
  <ion-label>Document number</ion-label>
  <ion-checkbox  ngControl="termsAccepted"></ion-checkbox>
</ion-item>
6

@mhartington Right, I’ve pasted wrong code, basically I’ve used ion-checkbox, but with same result.

@xr0master With or without “ngForm” it was the same. Also false was my first try, but it didn’t helped or changed anything (except field initialization state)

7

Nobody had issues with checkbox validation? It still work just once.

Any help is really appreciated!

8

A late response, but can help the next looking for a solution.
Try this workaround, it was the only method that worked for me:

HTML

<ion-item>
    <ion-label floating>Document number</ion-label>
    <ion-checkbox ngControl="termsAccepted" (ionChange)="onTermsChecked($event)"></ion-checkbox>
</ion-item>

TS

this.userContractForm = formBuilder.group({
    termsAccepted: [null, Validators.required],
})

onTermsChecked($event)
{
    if ( ! $event.checked)
    {
        this.userContractForm.patchValue({ termsAccepted: null });
    }
}
3 Likes
9

Since you are using the formGroup why don’t you create a custom validator CheckboxValidator and use that instead.

in a file validators/checkbox.ts

import { FormControl } from '@angular/forms';

export class CheckboxValidator{

  static isChecked(control: FormControl) : any{

    if(control.value != true){
      return {
        "notChecked" : true
      };
    }

    return null;
  }

}

in the formGroup declaration import the previous file and change the declaration to

this.userContractForm = formBuilder.group({
  termsAccepted: [false,Validators.compose([CheckboxValidator.isChecked, Validators.required])]
})

At this point I think the compose is not even necessary but oh well … :slight_smile:

6 Likes
10

very nice solution! thanks man

11

You can use Validators.requiredTrue for validating checkboxes.

6 Likes
12

@xr0master
Thanks alot i’m facing the same issue and cleared now

13

Awesome. Thanks you. :grinning:

14

This is the right solution

15

How can I add the validation if i have a list of checkbox and at least 1 should be selected? how can i put the validation along with error if not selected with a msg “Please Select one”

16

For ionic5 I had to use formControlName instead of ngControl and $event.detail.checked instead of $event.checked, but with these changes works super !!!

1 Like
17

This is the right way to do it.