Form validation is not working with Angular 2 FormBuilder in Ionic 2


I am building a Ionic 2 (typescript) application. Having problem ONLY in a simple model-driven form validation in checkbox (ion-checkbox tag).

I’m using FormBuilder to build the form module. I want the form to be validated / not validated based on the checked state of a checkbox input control. But its working one-way only. Here’s my code :


<ion-content padding>
    <form class="client_profile" [formGroup]="regForm">
        <div class="profile_pic" id="profile_pix">
            <img src="build/images/home.svg" id="client_camera_pic" />
            <ion-label floating>What we would call you?</ion-label>
            <ion-input type="text" formControlName="client_name"></ion-input>
            <ion-label floating>Choose your username</ion-label>
            <ion-input type="text" name="client_username" value="" #client_username formControlName="client_username"></ion-input>
            <ion-label floating>Where we will drop your Email?</ion-label>
            <ion-input type="email" name="client_email" value="" #client_email formControlName="client_email"></ion-input>
            <ion-label floating>We also need your phone number</ion-label>
            <ion-input type="number" name="client_phone" value="" #client_phone formControlName="client_phone"></ion-input>
        <ion-item class="reg_terms">
            <ion-checkbox secondary #terms name="terms" value="" checked="false" formControlName="terms"></ion-checkbox>
            <ion-label>I accept the <a href="#">Terms & Conditions</a></ion-label>
        <ion-buttons right class="client_reg_done">
            <button danger class="reg_complete" (click)="process_client_reg()" [disabled]="!regForm.valid">NEXT</button>


import { Component, ViewChild, ElementRef } from '@angular/core';
import { FORM_PROVIDERS, FormBuilder, FormControl, FormGroup, AbstractControl, Validators, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
import { App, NavController, ViewController, ModalController, LoadingController, LoadingOptions } from 'ionic-angular';

    templateUrl: "build/pages/registration/reg.html"
export class Registration {


    regForm: FormGroup;

    constructor(public app: App, public nav: NavController, public viewCtrl: ViewController, public elem: ElementRef, public modalCtrl: ModalController, public loading: LoadingController, public fb: FormBuilder){


    ngOnInit() {
        this.regForm ={
            client_name: ['', Validators.compose([Validators.required, Validators.maxLength(30), Validators.pattern('^[a-zA-Z\. ]+$')])],
            client_username: ['', Validators.compose([Validators.required, Validators.maxLength(20), Validators.pattern('[a-zA-Z0-9-_\.]+')])],
            client_email: ['', Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9-_]+@[a-zA-Z]+\.[a-zA-Z]{2,4}$')])],
            client_phone: ['', Validators.compose([Validators.required, Validators.pattern('^[\+0-9]{10,12}$')])],
            terms: [null, Validators.required]      

Checking / unchecking the Terms & Condition checkbox doesn’t updating the validation logic and the ‘NEXT’ button disabled state is not updating. Its because form validation isn’t taking account this checkbox. Some help is appreciated.


Probably you should write a custom validator. For example:

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

    export class RequiredCheckboxValidator {
      static validateCheckbox(control: AbstractControl) {

        if (!control.value) {
          return {'validateCheckbox': true};
        else {
          return null;

Then use that in place of Validators.required.


I am trying to do the same thing using the Ionic Framework 2.1.4, and I am having the same problem. Were you able to find an answer to this problem?


@skern - Yes I did eventually. You don’t even need to write custom validator. But you could if you want.

Here it is:

this.regForm ={
  terms: [false, Validators.pattern('true')]


yes .thanks this is work for me in validation of checkbox