CODEWITHSUNDEEP
angulartypescriptionic-frameworkangular-reactive-forms
UO Man
UO Man

Reputation: 153

Angular 2 reactive forms checkbox validation in Ionic

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?

Upvotes: 2

Views: 4962

Answers (3)

Junaid
Junaid

Reputation: 4926

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

Upvotes: 4

Sampath
Sampath

Reputation: 65978

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],
    });
  }

Upvotes: 1

UO Man
UO Man

Reputation: 153

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.

Upvotes: 4

Related Questions