How it works...

Let's start with the home.html file, where most of the validation code is located. If you look at the structure of this page, it's very typical. You have <ion-navbar> with <ion-title>. The <form> element must be inside the <ion-content> area.

It's a requirement to use the <form> element for Angular validation to work. Otherwise, there will be no submit event and you cannot catch errors for each input.

form has the following attributes:

<form #f="ngForm" novalidate (ngSubmit)="onSubmit(f)"> 

To assign a local variable on the fly, you use the # sign. This means that you want the f variable to refer to ngForm, which is automatically created by Angular. This is a special object that contains everything related to the current form. ...

Get Ionic Cookbook - Third Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.