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

Ionic Framework ionic-v3
1

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 :

reg.html

<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" />
        </div>
        <ion-item>
            <ion-label floating>What we would call you?</ion-label>
            <ion-input type="text" formControlName="client_name"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label floating>Choose your username</ion-label>
            <ion-input type="text" name="client_username" value="" #client_username formControlName="client_username"></ion-input>
        </ion-item>
        <ion-item>
            <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-item>
        <ion-item>
            <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>
        <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-item>
    </form>
    <div>
        <ion-buttons right class="client_reg_done">
            <button danger class="reg_complete" (click)="process_client_reg()" [disabled]="!regForm.valid">NEXT</button>
        </ion-buttons>
    </div>
</ion-content>

reg.ts

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';

@Component({
    templateUrl: "build/pages/registration/reg.html"
})
export class Registration {
    ngAfterViewInit(){

    }

    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 = this.fb.group({
            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.

1 Like
2

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.

1 Like
3

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?

4

@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 = this.fb.group({
  terms: [false, Validators.pattern('true')]
});
1 Like
5

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