Form in ionic

Forms can be implemented in three ways in Ionic:

  • [(ngModel]
  • Forms with Templates
  • Forms with FormBuilder
  1. [(ngModel0]: This is a simple API that binds and passes the object to the class. Templates uses ngModels to bind the object and ngSubmit to submit the form. When using ngModel, “name” property is required for the form fields. An example of how the ngModel is used in forms.
    <form (ngSubmit)="loginForm()">
    	<ion-item>
    		<ion-label>Login </ion-label>
    		<ion-input type="text" [(ngModel)]="login.username" name="username"></ion-input>
    	</ion-item>
    	<button type="submit" block>Login</button>
    </form>
    
    Class contains the submit form which can use this.<object> format to retrieve the value as shown in ngModel-Based Form Submission
    login = {}
    
    loginForm () {
    	console.log(this.username)
    }
  2. Forms with Templates This way of Form implementation uses the reference to the form instead of the model of the form. The values are pulled directly from the form itself, which is similar to the ngModel way of implementation. The main difference is that the ngModel uses the model of the form, but the template uses the form reference itself.
    <form #form="ngForm" (ngSubmit)="loginForm(form)" novalidate>
    	<ion-item>
    		<ion-label>Login</ion-label>
    			<ion-input type="text" required [(ngModel)]="login.username " ngControl="username">
    		</ion-input>
    	</ion-item>
    </form>
    
    Class pulls the form values using the reference to the form itself as shown below
    
    Template-Driven Forms–Class Definition
    
    login = {
    	username: '',
    };
    
    loginForm(form) {
    	console.log(form.value)
    }
  3. Forms with FormBuilder: Forms are created in the class and their logic is also maintained in the class. Template should import the FormBuilder from angular/forms. Also, template would use the formGroup and formControlName as shown below. FormBuilder is a helper service which creates the instance of ControlGroup which we can refer to as “form.”
    <form [formGroup]="login" (ngSubmit)="loginForm()">
    		<ion-item>
    		<ion-label>Login</ion-label>
    		<ion-input type="text" formControlName="username"></ion-input>
    	</ion-item>
    	<button type="submit" [disabled]="!login.valid">Submit</button>
    </form>
    
    The constructor of the class should declare the FormBuilder group and the form submission can pick up the values from the class variable itself, as shown below.
    
    constructor(private fb: FormBuilder) {
    	this.login = this.fb.group({
    		username: ['', Validators.required]
    	});
    }
    
    loginForm(){
    	console.log(this. login.value)
    }

 

Example for creating new form apps:

Angular 2’s ngModel directive allows us to implement a concept known as two-way data binding to form input fields in our templates.  Two-way data binding is a term used to describe the association between the value of a template input field and the value of a variable in the component class.

Using the ngModel directive values can be set in both directions, hence the term two-way data binding.

Step to follow:
Step 1: ionic start simpleForm blank –v2
cd simpleForm
npm install // Install additional node modules

Add the following code in home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>Your personal details</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <form (ngSubmit)="saveDetails()">
    <ion-list>
      <ion-item>
        <ion-label>Your Name</ion-label>
        <ion-input type="text" [(ngModel)]="details.name" name="name"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Your Occupation</ion-label>
        <ion-input type="text" [(ngModel)]="details.occupation" name="occupation"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Favourite Platform</ion-label>
        <ion-select [(ngModel)]="details.platform" name="platform">
          <ion-option value="Android">Android</ion-option>
          <ion-option value="iOS">iOS</ion-option>
          <ion-option value="WP">Windows Phone</ion-option>
          <ion-option value="Other">Other</ion-option>
        </ion-select>
      </ion-item>
      <button ion-button color="primary" text-center block> Save Details </button>
    </ion-list>
  </form>
</ion-content>

Each of the 3 fields in our above form has ngModel directive attached to it whose
value links that template input field to a specified property in the component
TypeScript class.

Step 2: Add the following code in app/home/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public details : any = {
    name : 'James Griffiths',
    occupation : 'Code Monkey',
    platform : 'Other'
  };
  constructor(public navCtrl: NavController){}

  saveDetails(){
    console.log(`My name is ${this.details.name}`);
    console.log(`I work as a ${this.details.occupation}`);
    console.log(`My favourite platform is ${this.details.platform}`);
  }
}

You’ll notice that we set a public property named details which are an object that contains the name, occupation and platform keys that the template input fields reference through the ngModel directives.