Checkbox validation


#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!


#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 });
    }
}

#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:


#10

very nice solution! thanks man


#11

You can use Validators.requiredTrue for validating checkboxes.


#12

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


#13

Awesome. Thanks you. :grinning: