How to store ionic form data in ionic storage

naveesh · March 26, 2018, 10:39am

<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>

naveesh · March 26, 2018, 10:40am

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

vibinflogesoft · March 26, 2018, 10:56am

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);
}

naveesh · March 26, 2018, 11:03am

so many errors…pls give exact solution

vibinflogesoft · March 26, 2018, 11:04am

@naveesh please paste the errors here

naveesh · March 26, 2018, 11:05am

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

naveesh · March 26, 2018, 11:06am

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);
      }
    }); 
 }

}

rapropos · March 26, 2018, 9:31pm

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”.

umajai · June 20, 2020, 8:30am

hi i am beginner to ionic,could u pls explain how to do
“passing stuff between pages”

Topic		Replies	Views
How to use local storage to save this form data? ionic-v3	0	2485	April 14, 2019
How to make Ionic Storage work with this form? Ionic Framework	0	955	April 15, 2019
How do i print form data in html file ionic angular 4 ionic-v3	9	3237	July 19, 2021
Storing and fetching form values ionic3 ionic-v1	10	1489	July 19, 2021
Something missing me in local storage please help ! i tried all my best but still i am missing something Ionic Framework	0	403	April 14, 2019

How to store ionic form data in ionic storage

Related topics