The original version of this article was written two years ago, which is way too old for what Ionic can provide today. I never intended to update this article, why spend so much time managing old content when Ionic/Angular is changing so fast, sometimes not even in a good way. To some point, I’m regretting that decision; not completely but enough that it’s bothering me on a daily basis. So, in that light let me introduce you the next iteration of this article. Hopefully, it will serve you better than the old one.
In my previous (it was so long ago) article, I demonstrated how to share data between different Ionic [2|3] pages or components. This specific tutorial will show you how we can work and build application forms including data validations.
Subjectively, I can’t remember anything in Ionic 1 as annoying as form handling and validations. This is mostly due to Angular shortcomings; I don’t want to use this comment as a hit on Ionic 1.
In those dark ages, we had to use ngModel to map our form data model. Thankfully, now we’re doing it much more explicitly; we’re probably going to use more code than before, but, at the same time, it will be much easier to understand. One last thing, don’t forget, we no longer need to play with frustrating ngModel and suffer any scope of data problems.
The advent of Angular 2 has brought us a quite bit different way of form handling, especially compared to what we had with Angular 1. I will show you how to translate these changes to Ionic 2 application, but, at the same time, you can count this as Angular 2|4 article.

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to Thanks and have a nice day!

Table of Contents

Is Ionic (2 or 3) causing you problems? Are you struggling with your application? Trust me, I was in the same situation as you. 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 here, leave me a comment, and I will do my best to cover it.


As always, make sure you have everything set up for Ionic [2|3] development. One last thing, as this framework is now known only as Ionic, further down the line I will refer to it as such; I will not use any version numbers. I will simply refer to it as Ionic.
To continue working on this tutorial you should have these:
  • Android Environment (or iOS if you’re working on a MacOS)
  • nodeJS
  • Ionic
  • Cordova
If you don’t have a prior Ionic installation find more information here: Ionic [2|3] | Installation Guide.

1. Update Ionic CLI

If possible you should have the latest nodeJS version, without it, you’ll not be able to appropriately install/update Cordova and Ionic. Worst case scenario, use any recent version possible.
On the other hand, If you have already worked with Ionic/Cordova, make sure they’re up to date; older versions may not work with this tutorial:
npm install -g ionic cordova
or to do a simple update:
npm update -g ionic cordova

2. Create A New Project

ionic start IonicFormValidation blank
cd IonicFormValidation 
If you prefer a working example you will find it at the end of this article; if not, keep reading.
Warning: As some of you don't have a prior Ionic CLI experience, from this point and on, every time I tell you to execute something, do that inside an example project folder.

3. Add Required Platform

Add Android platform:
ionic cordova platform add android
MacOS users can also add iOS platform:
ionic cordova platform add ios

Source Walkthrough

I will make this tutorial as easy as possible; if you want to see a different example or case just leave me a comment. For now, our example will need only two pages. One page will cover the authentication form while another one will hold a simple home page where we will end up after successful authentification.
The ionic blank app, as by default, comes with the pre-existing Homepage; we will need to add the second authorization page:
ionic generate page auth
This will generate a new folder called auth (inside pages folder) including our new AuthPage page. This process is done automatically, an AuthPage name was formed using page name we provided with ionic generate. You can also do this manually but this way is much faster and error free.
Just be careful, unlike Angular CLI generate, Ionic CLI generate will not integrate new page with rest of the code, we will need to do that manually.
So, as previously mentioned, before we can proceed any further, let’s include auth page into app.module.ts file.:
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AuthPage } from '../pages/auth/auth';

  declarations: [
  imports: [
  bootstrap: [IonicApp],
  entryComponents: [
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
export class AppModule {}
At this point, we have a simple app with two distinct pages. Let us proceed to app.component.ts file.
As we are offering authentication we first need to decide which page will show first. We will display auth page if an application was started for the first time, if authentication was unsuccessful or if logout function was triggered on the home page. On the other side, we will display homepage if authentication was successful, or if the original authentication was successful and login data was stored in a localstorage:
  checkPreviousAuthorization(): void { 
    if((window.localStorage.getItem('username') === "undefined" || window.localStorage.getItem('username') === null) && 
       (window.localStorage.getItem('password') === "undefined" || window.localStorage.getItem('password') === null)) {
      this.rootPage = AuthPage;
    } else {
      this.rootPage = HomePage;
Also, don’t forget to include AuthPage, as HomePage is the only one included by default:
import { AuthPage } from '../pages/auth/auth';
Now let’s open auth.ts page as we will spend most of our time there.
To be able to work with Ionic forms we need to import several Angular2 services, directives and objects:
import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
  • 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.
For our example, we will use two distinctive input boxes and one submit button. For now, just disregard Angular2 syntax.
<ion-content padding>
    <form [formGroup]="authForm" (ngSubmit)="onSubmit(authForm.value)">
            <ion-label floating>Username</ion-label>
            <ion-input formControlName="username" type="text"></ion-input>
            <ion-label floating>Password</ion-label>
            <ion-input formControlName="password" type="password"></ion-input>

        <button ion-button full color="primary" [disabled]="!authForm.valid" style="margin-top: 20px;" type="submit">Authorize</button>        
Take a careful look at each input field, you’ll notice a special keyword called formControlName:
<ion-input formControlName="username" type="text"></ion-input>
This keyword defines a Control object (a single form field).
We will not need to manually change these values in our code but if you want to do that you can do it like this (in auth.ts):
username: AbstractControl;
password: AbstractControl;		
Both username and password are defined as AbstractControltype and they’re connected to HTML side using these lines:
this.username = this.authForm.controls['username'];	    
this.password = this.authForm.controls['password'];		
On the other hand, we will need to access our form directly:
<form [formGroup]="authForm" (ngSubmit)="onSubmit(authForm.value)">	
In auth.ts :
authForm: FormGroup;	
Continue to the next page