Angular 2 reactive forms checkbox validation in Ionic

Question

I am using Angular Forms to make a simple form with email, password and a checkbox for Terms&Conditions in my Ionic app. My HTML:

<form [formGroup]="registerForm" (ngSubmit)="register()" class="center">
  <ion-item  class="input-field">
    <ion-input type="email" formControlName="email" placeholder="Email"></ion-input>
  </ion-item>
  <ion-item class="input-field">
    <ion-input type="password" formControlName="password" placeholder="Password" ></ion-input>
  </ion-item>
  <ion-item no-lines>
    <ion-checkbox formControllName="termsAndConditions"></ion-checkbox>
    <ion-label>Terms and Conditions</ion-label>
  </ion-item>
  <button ion-button full type="submit" [disabled]="!registerForm.valid">Register</button>
</form>

And a simple Angular component:

export class RegisterComponent {
  registerForm: FormGroup;
  email = new FormControl('', [Validators.required, Validators.email]);
  password = new FormControl('', [Validators.required]);
  termsAndConditions = new FormControl('', [Validators.required]);

  constructor(private formBuilder: FormBuilder) {
    this.registerForm = this.formBuilder.group({
      email: this.email,
      password: this.password,
      termsAndConditions: this.termsAndConditions
    });
  }
}

I have a problem with checkbox validation which doesn't work as I assumed it should. Right now I can submit the form without the checkbox. I simply need to make it required - the same as other form values which already worked, how can I do it?

UO Man · Accepted Answer · 2017-09-25 14:11:39Z

4

I managed to solve to problem using custom validator on the checkbox:

export class RegisterComponent {

  registerForm: FormGroup;
  email = new FormControl('', [Validators.required]);
  password = new FormControl('', [Validators.required]);
  termsAndConditions = new FormControl(undefined, [Validators.required]);

  constructor(private formBuilder: FormBuilder) {
    this.registerForm = this.formBuilder.group({
      'email': this.email,
      'password': this.password,
      'termsAndConditions': this.termsAndConditions
    }, {validator: this.checkCheckbox });
  }
  public checkCheckbox(c: AbstractControl){
  if(c.get('termsAndConditions').value == false){
    return false;
  }else return true;
}
}

Now the checkbox works properly.

answered Sep 25, 2017 at 14:11

UO Man

1534 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Junaid · Accepted Answer · 2020-06-05 11:24:25Z

4

TL;DR
Use Validators.requiredTrue for checkbox formControls or to handle any boolean values

Explanation:
There is another validator called Validators.requiredTrue which should be used on checkbox formControls instead of just Validators.required and the rest is the same. Use it like this in your constructor(also, this way, there is no need to initialize formControls outside constructor)

    this.registerForm = new FormGroup({
       email: new FormControl('', [Validators.required, Validators.email]);
       password: new FormControl('', [Validators.required]);
       termsAndConditions : new FormControl('', Validators.requiredTrue)
    });

Thanks to the guy who wrote this how to validate checkbox fields in reactive forms

edited Jun 5, 2020 at 11:24

answered Mar 13, 2018 at 14:29

Junaid

4,9641 gold badge39 silver badges46 bronze badges

1 Comment

jlang Over a year ago

This should be the accepted answer, as the current accepted one, only flags the form to be "invalid", while not marking the checkbox itself as "invalid". Your answer will handle that correctly, and seems to be the way angular wants us to use the Validators.

Sampath · Accepted Answer · 2020-06-04 16:28:10Z

1

04-06-2020: Ionic 5+ and Angular 9+

This works for me. i.e. Validators.requiredTrue

  initForm(): void {
    this.form = this.formBuilder.group({
      parcelSize: [false, Validators.requiredTrue],
    });
  }

answered Jun 4, 2020 at 16:28

Sampath

66.2k70 gold badges327 silver badges461 bronze badges

Collectives™ on Stack Overflow

Angular 2 reactive forms checkbox validation in Ionic

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related