I developed this article to demonstrate to you how your Ionic 4 application can manage form validation. This is the fourth iteration of this article since the introduction of Ionic 2 and I hope I won’t need to update in the near future.
 
What I am going to give here is a fast illustration of how to use Reactive forms to set up form validation in Angular 8 and Ionic 4. Below example is a simple authentication form with standard fields like email and password. If you would like to see a more complex example, leave me a comment below and I can do it in a day or two.
 
 

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 dragan.gaic@gmail.com. Thanks and have a nice day!
 

Related

 
If you are looking for a better example of form validation look at the below link Working Authentication Example. It uses this example and builds upon it.
 
 

Preparations

 
As in all my other tutorials on this topic, you need to have a working Ionic 4 workspace.
 
You will need these to finish your tutorial:
 
  • Android or iOS environment (optional as we can also run it in our browser)
  • NodeJS
  • Ionic
  • Cordova
 
If you neet to set-up a working Ionic 4 environment just follow this tutorial: Ionic [2|3] | Installation Guide.
 

1. Update Ionic CLI

 
Install or update your current Ionic version:
 
npm install -g ionic cordova
 
To update:
 
npm update -g ionic cordova
 
 

2. Create A New Project

 
ionic start IonicFormValidationV2 blank
cd IonicFormValidationV2
 
You will find a working example at the end of this article, or keep reading if you are interested in how it works. Jump to the working example here.
 
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

 
If you want to use the browser:
 
ionic cordova platform add browser
 
Android platform:
 
ionic cordova platform add android
 
iOS platform:
 
ionic cordova platform add ios
 

Source Walkthrough

 
The main idea is to make this tutorial as easy as possible.
 
As this is an authentication example we will need two pages: auth and home. Auth page will hold our form while home page will just hold a welcoming message.
 
Let’s start by adding the auth page, the home page will already be there.
 
ionic g page pages/auth
 
This will generate a new folder called auth (inside pages folder) including our new AuthPage page. This process works automatically and the AuthPage name is a combination of a page name we provided with ionic generate command. You can also do this manually but this way is much faster and error free.
 
At this point, we have a simple app with two distinct pages. Let’s proceed to app-routing.module.ts file and update existing Angular routing use auth as the initial page.
 
const routes: Routes = [
  { path: '', redirectTo: 'auth', pathMatch: 'full' },
  { path: 'auth', loadChildren: './pages/auth/auth.module#AuthPageModule' },
  { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
];
 
Open auth.ts page as we will spend the most of our time there.
 
To be able to work with Angular Reactive forms we first need to import them:
 
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 
I have also imported routing as we will need it to change a page.
 
  • 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 object.
  • A single Control object represents a single form item.
 
For our example, we will use two distinctive input boxes and one submit button.
 
<ion-item>
	<ion-label>User Name (Email)</ion-label>
	<ion-input formControlName="email"></ion-input>
</ion-item>


<ion-item>
	<ion-label>Password</ion-label>
	<ion-input formControlName="password"></ion-input>
</ion-item>

<ion-grid>
	<ion-row>
		<ion-col>
			<ion-button expand="block" size="large" type="submit">Authenticate</ion-button>    
		</ion-col>
		<ion-col>
			<ion-button expand="block" size="large" type="reset" (click)="onReset()">Reset</ion-button> 
		</ion-col>
	</ion-row>
</ion-grid>
 
Take a careful look at each input field, you’ll notice a special keyword called formControlName:
 
<ion-input formControlName="email"></ion-input>
 
This keyword defines a Control object (a single form field).
 
Both email and password are defined as a part of FormBuilder group:
 
this.authForm = this.formBuilder.group({
	email: ['', [Validators.required, Validators.email]],
	password: ['', [Validators.required, Validators.minLength(6)]]
}, {});
 
This is also how we are initializing the form.
 
We will also need to access our form directly:
 
<form [formGroup]="authForm" (ngSubmit)="onSubmit(authForm.value)">	
 
We are doing it using FormGroup keyword in both auth.page.html and auth.page.ts:
 
authForm: FormGroup;	
 
We’re using FormBuilder helper service formBuilder to group form fields into ControlGroup object called authForm.
 
Continue to the next page