In my previous article, I showed you how to share data between pages/components in Ionic 2 application. This time we will talk about how Ionic 2 handles form building and validations.
In Angular2, form handling has changed quite a bit from their v1 counterpart. We will translate these changes to our Ionic 2 application, but at the same time, you can count this as an Angular2 article.
I must admit, personally, there isn’t anything as annoying as form handling in Ionic 1. Again mostly due to AngularJS shortcomings; this is not a hit at Ionic 1.
Back then we used to use ngModel to map our form data model; now we’re doing it much more explicitly. First of all, we’re probably going to use more code than with v1, but at the same time, it will be much easier to reason. And don’t forget, we no longer need to play with frustrating ngModel and suffer any scope data problems.

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


Table of Contents

Ionic 2 is causing you problems? Are you struggling to make it work? Trust me, I wasn’t in any better situation. If you require more information beyond the subject of this article you will probably find it in a list below. Take a look; if there’s a topic not covered there, leave me a comment and I’ll cover it.


Before we can begin, make sure you have everything preconfigured for Ionic 2.
You should have these:
  • Android Environment (or iOS if you’re working on a MacOS)
  • nodeJS
  • Ionic 2
  • Cordova
Find more information here: IONIC 2 | INSTALLATION GUIDE if you don’t have a previous Ionic 2 installation or if you never read my previous articles on this topic.

1. Update Ionic & Cordova

You need to have the latest version of nodeJS, without it, you’ll not be able to install/update Cordova and Ionic appropriately.
If you have a previous Ionic/Cordova installation make sure its up to date, older versions may not work with this tutorial. Though latest versions may also mess things up:
npm install -g cordova ionic@beta
or you can even do it like this:
npm update -g cordova ionic@beta
I will remove beta keyword once Ionic 2 reach RC status.
Warning: Ionic2 is still in beta status so the final implementation may differ from this code. I will update this article if and when that happens.

2. Create A New Project

ionic start Ionic2FormValidation blank --v2
cd Ionic2FormValidation
Open app directory and remove all content from a directory called pages but don’t delete it. Somewhere below you’ll find a link to GitHub repo holding a working example (or you can copy past provided code). Download zipped project repo folder, copy app and www directory and past it into a newly created folder.
Warning: Since some of you never worked with Ionic CLI. From this point and further, every time I tell you to execute something, do that inside a project folder.
Add Android platform:
ionic platform add android
MacOS users can also add iOS platform:
ionic platform add ios

Embeded Example

Ionic 2 Form Validation


Before we can start working with Ionic forms we must import several Angular2 services, directives and objects:
import {FORM_DIRECTIVES, FormBuilder,  ControlGroup, Validators, AbstractControl} from '@angular/common';
  • FORM_DIRECTIVES is just a constant that Angular2 uses as a collection around several form related directives like ngControl, ngControlGroup, ngForm, etc.
  • While we can build forms using ngForm and ngControl, a more flexible way is using FormBuilder. It’s just a helper service (class) that helps us build forms using Control and ControlGroup objects.
  • A single Control object represents a single form item. At the same time, ControlGroup is a wrapper interface around a collection of Control objects.
  • Validators is a service (module) we use for validation purposes.
  • AbstractControl is an abstract class and a common ancestor of Control and ControlGroup.
In this example, we will use two input boxes and one submit button. For now, just disregard Angular2 syntax.
    <form [ngFormModel]="authForm" (ngSubmit)="onSubmit(authForm.value)">
        <ion-item [class.error]="!username.valid && username.touched">
            <ion-label floating>Username</ion-label>
            <ion-input type="text" value="" [ngFormControl]="username"></ion-input>         
        <ion-item [class.error]="!password.valid && password.touched">
            <ion-label floating>Password</ion-label>
            <ion-input type="text" value="" [ngFormControl]="password" ></ion-input>
        <button type="submit" class="custom-button" [disabled]="!authForm.valid" block>Submit</button>
Take a careful look at each input field, you’ll notice a special keyword called ngFormControl:
<ion-input type="text" value="" [ngFormControl]="password" ></ion-input>
This keyword defines a Control object (a single form field).
What connects this object with JavaScript side is provided value. In this case, it’s username or password.
Take a look at JavaScript side:
username: AbstractControl;
password: AbstractControl;

this.username = this.authForm.controls['username'];	    
this.password = this.authForm.controls['password'];		
Both username and password are defined as AbstractControl and they’re connected to HTML side using these lines:
this.username = this.authForm.controls['username'];	    
this.password = this.authForm.controls['password'];		
If you closely take a look at this code you’ll notice a authForm object. That’s a ControlGroup object that holds our form fields (Control objects).
In JavaScript it’s defined here:
authForm: ControlGroup;		
Continue to the next page

  • Works great 🙂 Thank you for sharing it. Though, I did not try custom method for validating.

    • You’re welcome … neighbour 🙂

    • karthiikk Baleneni

      whether its working in latest ionic2 beta v0.0.25

  • Thanks for that. It would be helpful to state what files these code blocks go into..

  • Thanks for that. This helped me a lot.

    I managed to get rid of the ‘function’ keyword in
    checkFirstCharacterValidator(control: Control): { [s: string]: boolean } { … }

    by adding ‘this’ in the Validators group:
    ‘username’: [”, Validators.compose([Validators.required, Validators.minLength(8), this.checkFirstCharacterValidator])],

    I also didn’t need to add the class declarations as they are already declared in the constructor:
    //authForm: ControlGroup;
    //username: AbstractControl;
    //password: AbstractControl;

    Lastly I changed the return line from the checkFirstCharacterValidator function to:
    return {“invalid_firstCharacter”: true};
    as I found naming the string and the method the same confusing (even though that’s what the native angular 2 validator functions do).

  • aluknot

    One of the things i don’t like about ionic 2 is the import part… you need to import a lot of things, when you only want to do something really simple. How can i remember this? i have to come back to this article every time.

  • Graciele E. Victor

    I’d love to see this article updated to Ionic 2 beta 6

  • karthiikk Baleneni

    whether it will work in Ioinic 2 @beta 0.25?? seems to be its not working.

  • Cyril Zilbermann

    Thanks for your share !
    I’m very newbie on ionic.
    However, I’ve a trouble : I’ve copy/paste your code for testing and I’ve compilation parsing error on three variables declaration (authForm, username and password).
    It seems does not accept variable declaration on class and I don’t know why.
    Could you help me ?

    • Cyril Zilbermann

      My bad, i tried to work a TS code like a JS one :/
      Works perfectly !
      Thanks !

  • Varshil Shah


    • Don’t forget that this is still JavaScript and that every object is easily readable.

      For example, you can use this:


      To find out what AbstractControl object looks like. And it will tell you that value is accessible like this:


      • Varshil Shah

        thanx..solved problem

        • Your welcome

          • Varshil Shah

            Hey I have one another problem..I getting the response from the server now it’s not fully json response so I want cut string how I do it in ionic 2..

          • My advice, Google it

          • Varshil Shah

            i already do it but i didn’t anything find it.

  • Davide Troise

    HI! I’m trying to follow your guide, but there’s no way i can make the custom Validator Work :/
    I wrote a console.log() in the validator, but it never appears, like it’s never called! Would you please paste your whole CustomValidator.ts file? Thanks!

    • Just download my GitHub example, you can find it on the second page. Though I will also add CustomValidator.ts, I forgot to add it after my last article update.

      • Andre Dreyer

        After having a look at the required validator I realised that the logic of the custom validator function had to be inverted. If (valid) return null else return {‘required’: true}

    • I have update article with CustomValidators.ts class example

  • Palmani

    Hi, Thanks for your post. It’s really helped a lot. Please help me to add validation for creating dynamic elements. i’m trying to add validation for input elements using ng-repeat.

  • Áron Barócsi

    is this is depreciated as of rc4?

    • James Trigg

      Yes think so. beta11 is now using the new angular forms.
      think you use some setting in ionicBootstrap to use the old forms but not really the way forward.

  • james stevens

    hey i am not able to submit the form,when i click on submit there is no submitted values shown in the console

  • manoj meshram

    hi, There is any way to submit image with form’s other field?

  • Lokesh Sahu

    How to prevent hidden field validation. In my form i have a select box, if i select one option some fields are visible, if select another option then other fields are visible and the previous fields are hidden.

    • Andreza Pollyana

      Hi, maybe this kind of validator will help you

      ‘note’: [“”, Validators.nullValidator]

  • manoj meshram

    haserror is not function in ionic2 beta 11.

  • EM Products

    hi, thanks for the great post
    any upcoming update for the post
    also how can I validate for retype password ??

  • Eduardo Borges


  • Lior Balmas

    Thanks for the article.
    I get this error:
    “Can’t bind to ‘ngFormModel’ since it isn’t a known native property”

    I use beta.11

  • Ansar Zhalyalov

    Unfortunately doesn’t work in beta 11 – “ORIGINAL EXCEPTION: No value accessor for ””

    • Franck Didier

      +1 doesn’t work

      • An article has been updated to Ionic v2 2.2.1 version.

  • Hi, Thanks for effort, the only problem is ionic2 and angular2 have had a lot of breaking changes, also the article doesn’t have published date (or mentioning ionic2 and angular2 version that this is based on), then it will be so confusing.

    • An article has been updated to Ionic v2 2.2.1 version. Plus article always had published date; on the second page; at the beginning of the Code chapter.

      Thought; I should move this information to the first page; it makes more sense. Thank you for your observation.

  • Periyasamy M

    Thank you so much.This is working fine..particular working in latest ionic 2 version and angular 2 rc versions. Thank you once again .@gajotres

  • Tammanoon K

    Thank you for reply i’ll try this.

  • Stevenson Nelli

    Could you please provide example with ionic select field ??