How to store ionic form data in ionic storage


#1
<ion-list>
    <button ion-button block (click)="openModal()">Add Address</button>

      <ion-item-group>
        <ion-input [(ngModel)]="todo" placeholder="city" type="text"></ion-input>
      <!-- <span>{{todo}}</span> -->
      
        <ion-input [(ngModel)]="todo1" placeholder="date" type="text"></ion-input>
      <!-- <span>{{todo1}}</span> -->
      
        <ion-input [(ngModel)]="todo2" placeholder="price" type="text"></ion-input>
      <!-- <span>{{todo2}}</span> -->
     
        <ion-input [(ngModel)]="todo3" placeholder="address" type="text"></ion-input>
      <!-- <span>{{todo3}}</span> -->
      </ion-item-group>
      <button ion-button full (click)="add()">ADD</button>
  </ion-list>

#2

and how to retrive and display in .html file ionic 3


#3

Hi@naveesh
Its easy to store as key value pair if you are using angular formgroup for creating form
for example

HTML
<form [formGroup]="otp_verification" (ngSubmit)="verifyOtp()">
<ion-list>
	<ion-item>
		<ion-icon name="ios-lock-outline"></ion-icon>	
		<input type="tel" formControlName="otp" maxlength="6" minlength="4" placeholder="Enter OTP" required/>
	</ion-item>
</ion-list>
<button ion-button full type="submit" tappable type="submit">Next</button>
</form>
TS

import { Validators, FormBuilder, FormGroup } from '@angular/forms';
constructor()
{
 this.otp_verification=this.fb.group({
          otp:['',Validators.required]
        });
}
verifyOtp(){
console.log(this.otp_verification.value);
this.localStorage.setvalue(formdata,this.otp_verification.value);
}

#4

so many errors…pls give exact solution


#5

@naveesh please paste the errors here


#6

core.js:1350 ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘group’ of undefined
TypeError: Cannot read property ‘group’ of undefined
at new InsPage (ins.ts:47)
at createClass (core.js:12174)
at createDirectiveInstance (core.js:12011)
at createViewNodes (core.js:13449)
at createRootView (core.js:13339)
at callWithDebugContext (core.js:14740)
at Object.debugCreateRootView [as createRootView] (core.js:14041)
at ComponentFactory_.create (core.js:10960)
at ComponentFactoryBoundToModule.create (core.js:3922)
at NavControllerBase.viewInit (nav-controller-base.js:441)
at new InsPage (ins.ts:47)
at createClass (core.js:12174)
at createDirectiveInstance (core.js:12011)
at createViewNodes (core.js:13449)
at createRootView (core.js:13339)
at callWithDebugContext (core.js:14740)
at Object.debugCreateRootView [as createRootView] (core.js:14041)
at ComponentFactory
.create (core.js:10960)
at ComponentFactoryBoundToModule.create (core.js:3922)
at NavControllerBase._viewInit (nav-controller-base.js:441)
at c (polyfills.js:3)
at Object.reject (polyfills.js:3)
at NavControllerBase._fireError (nav-controller-base.js:223)
at NavControllerBase._failed (nav-controller-base.js:216)
at nav-controller-base.js:263
at t.invoke (polyfills.js:3)
at Object.onInvoke (core.js:4629)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3


#7

html

<!--
  Generated template for the InsPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Insurances</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <button ion-button block (click)="openModal()">Add Address</button>
    
      <ion-item-group>
        <ion-input [(ngModel)]="todo"  placeholder="city" type="text"></ion-input>   
        <ion-input [(ngModel)]="todo1" placeholder="date" type="text"></ion-input>     
        <ion-input [(ngModel)]="todo2" placeholder="price" type="text"></ion-input>
        <ion-input [(ngModel)]="todo3"  placeholder="address" type="textarea"></ion-input>
      </ion-item-group>
      <button ion-button full (click)="add()">ADD</button>

      <form [formGroup]="otp_verification" (ngSubmit)="verifyOtp()">
        <ion-list>
          <ion-item>
            <ion-icon name="ios-lock-outline"></ion-icon>
            <input type="tel" formControlName="otp" maxlength="6" minlength="4" placeholder="Enter OTP" required/>
          </ion-item>
        </ion-list>
        <button ion-button full type="submit" tappable type="submit">Next</button>
      </form>
  </ion-list>
    <!-- <button ion-item *ngFor="let insurance of insurances">
      {{ insurance.name }} -
      <p>issued date:{{ insurance.date }} </p>
      <p>Valid Upto:{{ insurance.ValidUpto}} </p>
      <p>price:{{ insurance.price }} </p>
      <p>{{ insurance.description }}</p>
    </button> -->

    <!-- <ion-item *ngFor="let service of services">
          City: {{service.city | json }}
      <p> Date:{{service.date | json }}</p>
      <p> Address: {{service.address | json }}</p>
      <p> Price: {{service.price | json }}</p>
    </ion-item> -->
      <!-- <ion-item-sliding *ngFor="let t of todos">
        <ion-item>
          {{t}}
        </ion-item>
        <ion-item-options side="right">
          <button ion-button color="danger" (click)="delete(t)">
            <ion-icon name="trash"></ion-icon> Delete
          </button>
        </ion-item-options>
      </ion-item-sliding>
</ion-content> -->
<ion-content>
    <ion-list>
      <ion-item-group *ngFor="let t of todos" (click)="delete(t)">
        {{t}}
      </ion-item-group>
    </ion-list>
</ion-content>
 
<!-- <ion-content padding>
  <ion-list>
    <ion-item *ngFor="let service of services">
      <p> City: {{service.city | json }}</p>
      <p> Date:{{service.date | json }}</p>
      <p> Address: {{service.address | json }}</p>
      <p> Price: {{service.price | json }}</p>
    </ion-item>
  </ion-list>
</ion-content> -->

ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController, ModalController } from 'ionic-angular';
import { InsModel } from '../../models/ins';
import { Data } from '../../providers/data/data';
import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms';
import { ModalPage } from '../modal/modal';
import { Storage } from '@ionic/storage'
/**
 * Generated class for the InsPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-ins',
  templateUrl: 'ins.html',
})
export class InsPage {
  insurances: Array<InsModel>;
  public otp_verification={};
  constructor(public storage: Storage,public modalCtrl: ModalController, public alertCtrl: AlertController, public navCtrl: NavController, public navParams: NavParams, public fb: FormBuilder, public dataService: Data) {
    this.otp_verification = this.fb.group({
      otp: ['', Validators.required]
    });
  }
  verifyOtp() {
    console.log(this.otp_verification);
    this.localStorage.setvalue(formdata, this.otp_verification.value);
  }
  insurance = {}
  
  public services = [];

  todos: string[] = [];
  todo: string;
  todo1: string;
  todo2: string;
  todo3: string;

  openModal() {
    let myModal = this.modalCtrl.create(ModalPage);
    myModal.present();
  }

  public loginForm = this.formBuilder.group({
    email: ["", Validators.required],
    password: ["", Validators.required]
  });

  doLogin(event) {
    this.navCtrl.push(InsPage);
    console.log(this.loginForm.value);
    // let alert = this.alertCtrl.create({
    //   subTitle: 'Successfully submitted',
    //   buttons: ['OK']
    // });
    // alert.present();
  }

  public add() {
    this.todos.push(this.todo); 
    this.storage.set('bike', this.todo);
    console.log(this.storage.set('bike', this.todos));
    console.log(this.todos.push(this.todo));
    console.log(this.todos.push(this.todo1));  
    console.log(this.todos.push(this.todo2));  
    console.log(this.todos.push(this.todo3));  
    this.todo = "";
    this.todo1 = "";
    this.todo2 = "";
    this.todo3 = "";
  }

  // delete(item) {
  //   var index = this.todos.indexOf(item, 0);
  //   if (index > -1) {
  //     this.todos.splice(index, 1);
  //   }
  // }

  ionViewDidLoad() {
    this.storage.set('bike', this.todo);
    this.insurances = [
      {
        name: 'Vehicle Body',
        description: 'Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget',
        date: new Date(), 
        ValidUpto:'3 years from the date of issue.',
        price:5000
      },
      {
        name: 'Engine',
        description: 'Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget',
        date: new Date(),
        ValidUpto: '3 years from the date of issue.',
        price: 1500
      },
      {
        name: 'Tyres',
        description: 'Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget',
        date: new Date(),
        ValidUpto: '3 years from the date of issue.',
        price: 500
      },
      {
        name: 'Suspension',
        description: 'Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget',
        date: new Date(),
        ValidUpto: '3 years from the date of issue.',
        price: 250
      }
    ]
    this.dataService.getData().then((todos) => {
      if (todos) {
        this.services = [todos];
        console.log(this.services);
      }
    }); 
 }

}


#8

Before you consider putting anything into storage, ask yourself “do I need this to remain across the user quitting and restarting the app?”. If the answer is anything but an unqualified absolute “yes”, then storage is the wrong tool for what you are trying to do.

Yes, that includes “passing stuff between pages”.