In previous posts I walked you through the steps I followed when creating a bespoke 'look and feel' for a Hybrid Mobile App built using the Ionic Framework.

In this postal service, I'll show yous how to build a 'Sign in' page using FormBuilder.

Forms

To quote Angular'due south 'Getting Started' guide:

Developing forms requires design skills, equally well equally framework support for 2-way data binding, change tracking, validation, and error treatment.

Angular supports three distinct approaches to building forms: Templates; ngModel; and FormBuilder.

FormBuilder

FormBuilder is an aptly-named grade that helps us build forms. Forms contain FormControls and FormGroups and FormBuilder makes the procedure of creating them a fiddling easier (you lot can think of it as a 'manufacturing plant' object).

The Sign in page

Let's start by using the Ionic CLI to create the scaffolding for the 'Sign in' page:

            ionic m page sign-in

The CLI will create a new directory (/src/pages/sign-in) and four new files:

            ├── /big-tiptop     └── /src         └── /pages             └── /sign-in                 ├── sign-in.html                 ├── sign-in.module.ts                 ├── sign-in.scss                 ├── sign-in.ts

Using FormBuilder

We're going to be using FormBuilder and FormGroup so we need to import the appropriate classes (in sign-in.ts):

            import { FormBuilder, FormGroup } from '@angular/forms';

We inject FormBuilder by calculation a constructor parameter to the SignInPage component:

            import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-athwart'; import { FormBuilder, FormGroup } from '@angular/forms';  import { LoggerService } from '../../services/log4ts/logger.service';  @IonicPage() @Component({   selector: 'page-sign-in',   templateUrl: 'sign-in.html' }) consign grade SignInPage {    credentialsForm: FormGroup;    constructor(public navCtrl: NavController,               public navParams: NavParams,               private formBuilder: FormBuilder,               individual logger: LoggerService) {      this.credentialsForm = this.formBuilder.group({       electronic mail: [''],       countersign: ['']     });   }    onSignIn() {     this.logger.info('SignInPage: onSignIn()');   }    onForgotPassword() {     this.logger.info('SignInPage: onForgotPassword()');   } }

During construction of the SignInPage component a FormBuilder instance will be injected (by Angular DI) and assigned to the formBuilder variable.

We create a FormGroup by calling FormBuilder's group() method and assign it to the credentialsForm variable. The group() method accepts an object containing 'key-value' pairs that draw the groups's FormControls.

Adding credentialsForm to our view

We employ the [formGroup] directive to tell Athwart that nosotros want to utilize the credentialsForm as the FormGroup for this form:

            <form [formGroup]="credentialsForm">      ...    </form>

And when we want to bind a FormControl to an <ion-input> nosotros apply the [formControl] directive:

            <form [formGroup]="credentialsForm">    <ion-item>     <ion-label floating>Email</ion-characterization>     <ion-input [formControl]="credentialsForm.controls['electronic mail']"         type="email"></ion-input>   </ion-item>      <ion-item>     <ion-label floating>Countersign</ion-label>     <ion-input [formControl]="credentialsForm.controls['countersign']"         type="password"></ion-input>   </ion-item>          <ion-row>     <ion-col text-center>       <button ion-button block color="secondary" (click)="onSignIn()">         Sign in       </button>     </ion-col>   </ion-row>    <ion-row>     <ion-col text-center>       <button ion-button clear color="calorie-free" (click)="onForgotPassword()">         Forgot your password?       </button>     </ion-col>   </ion-row>  </form>

AppModule

We too need to add the SignInPage component to our AppModule (in app.module.ts):

            ...  import { SignInPage } from '../pages/sign-in/sign-in';  @NgModule({   declarations: [     ...     SignInPage   ],   imports: [     ...     IonicModule.forRoot(BigTopApp, {}, {       links: [         ...         { component: SignInPage, name: 'SignInPage', segment: 'sign-in' }       ]     })   ],   bootstrap: [IonicApp],   entryComponents: [     ...     SignInPage   ],   providers: [     ...   ] }) consign form AppModule {}

Permit's try running the application to make sure it'southward working as expected:

            ionic serve --platform=ios

You should run into output like:

What'southward Next

In the adjacent mail service, I'll show you lot how to add together back up for validation and error handling:

And social logins:

Source Code:
  • GitHub: The Big Top App
Resources:
  • Ionic Framework docs: Ionic and Forms
  • Angular docs: Forms:
  • ng-book blog: The Ultimate Guide to Forms in Angular iv (Angular 2+)