Pre populate form in ionic 2

on with Leave a reply

This small tutorial explains how to pre-render or pre-populate the data in the form in ionic 2. Mostly we do this while editing form.
I am using typscript and Ionic 2 framework. I am considering you already having project setup.

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.7
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.30
OS: Linux 3.13
Node Version: v6.6.0

Lets say, you want to create the contact form with name and contact number fields.


Your HTML file should be something like this.

    <form #contactsForm="ngForm" novalidate autocomplete="false">
      	<ion-label stacked>Contact Name</ion-label>
        <ion-input [(ngModel)]="" name="contact_name" type="text"  #name="ngModel" spellcheck="false" autocapitalize="off" required>

      <p [hidden]="name.valid || submitted == false" color="danger" padding-left>
        Contact name can't be empty!

      	<ion-label stacked>Contact Number </ion-label>
        <ion-input [(ngModel)]="" name="contact_mobile" type="text"  #mobile="ngModel" spellcheck="false" autocapitalize="off" required> 
        <ion-icon name="contact" (click)="pickContact()" icon-right item-right></ion-icon>


      <p [hidden]="mobile.valid || submitted == false" color="danger" padding-left>
        Contact number can't be empty!

      <ion-row responsive-sm>
          <button ion-button (click)="onSave(contactsForm)" type="submit" color="secondary" block>Save Contact</button>


Typescript file (contact.ts)

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

import { UserData } from '../../providers/user-data';

  selector: 'page-contact',
  templateUrl: 'contact.html'
export class ContactPage {

	submitted = false;
	contact: {
		name?: string,
	} = {name:'',mobile:'',id:''};

  	public navCtrl: NavController,
  	public userData: UserData
  	) {


  ionViewDidLoad() { => { 

   = JSON.parse(contact);  // this will bind the data to the view


Provider file user-data.ts

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';

export class UserData {

      public storage: Storage,
      ) {}

  setContact(contact) {'contact', JSON.stringify(contact));

  getContact() {
    return'contact').then((value) => {
      return value;


Hope this helps someone

Posted in Cocktail and tagged by .

About Gowri

I am professional web developer with 4+ years experience. PHP, jQuery, WordPress, Magento and Symfony2 are my key skills in web development. I am working with strong enthusiastic team with spirit. We provide all web related solution like HTML/CSS development, Web graphic design and Logo.

Leave a Reply

Your email address will not be published. Required fields are marked *