Checkbox validator for SEX

Ionic Framework ionic-v3
1

hi guys :smiley:

i have checkbox to ask sex along user’s registration but i am not able to create my validator for that.

HTML REGISTER

<ion-checkbox checked="false" formControlName="sexe" [(ngModel)]="user.sexe" [class.invalid]="!mySignupForm.controls.sexe.valid"></ion-checkbox>

<ion-checkbox checked="false" formControlName="sexe" [(ngModel)]="user.sexe" [class.invalid]="!mySignupForm.controls.sexe.valid"></ion-checkbox>

TS REGISTER

this.mySignupForm = formBuilder.group({
sexe: ['', SexeValidator.isValid]
});

SEXE REGISTER

import { FormControl } from '@angular/forms';
 
export class SexeValidator {
 
    static isValid(boxes: FormControl): any {
		
	      let valid : boolean = false,
	          k     : any;
	      let count  : number = 0;


	      for (k in boxes.value)
	      {
	            count++;
	      }

	      if (count==1) {
	      	valid=true;
	      }
	      else if (count ==0) {
	      	valid=false;
	      }
	      else if (count==2) {
	      	valid=false;
	      }
	      else {
	      	valid=false;
	      }

	      return {
	         valid
	      };

    }

}
2

GIven the political direction of multiple countries, I would make an enum Gender, and have 1 and 2 be MALE and FEMALE, so you can add DECLINE_TO_STATE, or anything else that a state or country form might mandate in the future.

By the way, that’s a cute enum trick:

enum Gender {
  MALE = 1, // this is 1
  FEMALE // this is 2
}

That way, you can just check (!genderVariable) and you don’t have to differentiate between undefined and 0.

2 Likes
3

yes i can improve this code, not all doubt but i want try some function corresponding to each gender.

But at this time, i just want validate each gender in my validator and i can’t access each value of each checkbox

4

I’d recommend you read the official Angular validator docs. Don’t use static, don’t use any. Do follow code examples in official Angular docs.

5

they don"t talk about <ion-checkbox> just <input type="checkbox"> but i found solution with angular on stackoverflow but they used follow code in app.js that i can"t (or i don"t know use) in my ionic 3 app.

.controller {
…
}

in addition, i use this.mySignupForm = formBuilder.group({}) inside my constructor and i don"t know how use external function.

6

Checkboxes are a bad fit here. A select would be a more intuitive UI, and also design this validation problem out of existence.

7

There’s a lot of weak code there, straight talk. Read the official Angular docs on form validation, and apply that to Ionic. That’s far and away the best resource.

1 Like
8

thanks for the select, so sorry if ionic & angularjs are not my life