# Storing and fetching form values ionic3

**URL:** <https://forum.ionicframework.com/t/storing-and-fetching-form-values-ionic3/125599>\
**Category:** ionic-v1\
**Created:** [March 23, 2018, 5:22am UTC](https://forum.ionicframework.com/t/storing-and-fetching-form-values-ionic3/125599 "2018-03-23T05:22:35Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![naveesh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/naveesh/32/118284_2.png) [@naveesh](https://forum.ionicframework.com/u/naveesh)\
**Post date:** [March 23, 2018, 5:22am UTC](https://forum.ionicframework.com/t/storing-and-fetching-form-values-ionic3/125599/1 "2018-03-23T05:22:35Z")

</div>

how to fetch and store form values in local storage ionic 3

---

<div class="post-metadata">

**Author:** ![anespa](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/anespa/32/116051_2.png) [@anespa](https://forum.ionicframework.com/u/anespa)\
**Post date:** [March 23, 2018, 5:40am UTC](https://forum.ionicframework.com/t/storing-and-fetching-form-values-ionic3/125599/2 "2018-03-23T05:40:08Z")

</div>

Dear Naveesh,

Please set this sample project with node installation , you will get your solution

[Download sample project](https://app.box.com/s/2mzlfsqu46r73uv3zxgl5fmfwj31z0lz)

Thanks

Anes

---

<div class="post-metadata">

**Author:** ![naveesh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/naveesh/32/118284_2.png) [@naveesh](https://forum.ionicframework.com/u/naveesh)\
**Post date:** [March 23, 2018, 8:22am UTC](https://forum.ionicframework.com/t/storing-and-fetching-form-values-ionic3/125599/3 "2018-03-23T08:22:52Z")

</div>

there are many errors

---

<div class="post-metadata">

**Author:** ![anespa](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/anespa/32/116051_2.png) [@anespa](https://forum.ionicframework.com/u/anespa)\
**Post date:** [March 23, 2018, 8:42am UTC](https://forum.ionicframework.com/t/storing-and-fetching-form-values-ionic3/125599/4 "2018-03-23T08:42:48Z")

</div>

Its working and i created apk 13 days before… i will check and reply you

For your quick reference please see a page where use local storage in ionic 3…

```auto
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController, AlertController } from 'ionic-angular';
import { PropertyProvider } from '../../providers/property/property';
import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
import {GlobalProvider} from "../../providers/global/global";
import { Storage } from '@ionic/storage';
/**
 * Generated class for the LbsettingsPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-lbsettings',
  templateUrl: 'lbsettings.html',
  
})
export class LbsettingsPage {
  formgroup:FormGroup;
  singleSelect:AbstractControl;
  lbTypeSelect:AbstractControl; 
  data:any = {};
  result: any;
  searchFlag: boolean = false;
  connectivityFlag: boolean = false;
  public district: any=0;
  public localbody: any=0;
  public localbodytype: any=0;
  public lbname: string;
  param1 : any;
  param2 : any;
  //propertytaxPage = PropertyTaxPage;
  constructor( public navCtrl: NavController, 
    public navParams: NavParams, 
    public formbuilder: FormBuilder, 
    public propertyProvider: PropertyProvider,
    private storage: Storage,
    public global1:GlobalProvider,
    public loadingController: LoadingController,
    private alertCtrl: AlertController ) {
    
    this.formgroup = formbuilder.group({
      singleSelect:['',Validators.required],
      lbTypeSelect:['',Validators.required],
    });
    this.singleSelect = this.formgroup.controls['singleSelect'];
    this.lbTypeSelect = this.formgroup.controls['lbTypeSelect'];
    
    this.data.singleSelect = '';
    this.data.lbTypeSelect = '';
    if(this.global1.getnetwork())
    {
      this.district = this.getDistrict();
      this.localbodytype = this.getLBType();
      this.connectivityFlag = true;
    } else {
      alert("You are offline, please be online to change Local body settings");
    }  
  }
 
  presentAlert() 
  {
      let alert = this.alertCtrl.create({
        title: 'No Network',
        subTitle: 'You are offline, please be online to change Local body settings',
        buttons: ['OK']
      });
      alert.present();
  }

  getLBList(district,lbtype)
  { 
    if(this.global1.getnetwork())
    {
      this.connectivityFlag = true;
      let loader = this.loadingController.create({
      	content: "Loading Local Body List ... "
      });  
      loader.present();
      this.propertyProvider.getLocalbodies(district,lbtype)
        .then(data => {
          this.searchFlag = true;
          this.result = data;
          loader.dismiss();
      });
    } else {
      //alert("You are offline, please be online to change Local body settings"); 
      this.presentAlert();
    }  
  }
  setLB(LBID,lbname,tnyLBCategory,distid,lbtype) 
  {
    if(this.global1.getnetwork())
    {
      this.connectivityFlag = true;
      this.storage.set('lbid', LBID);
      this.storage.set('lbname', lbname);
      this.storage.set('distid', distid);
      this.storage.set('lbtype', lbtype);  
      this.global1.showToast(lbname+" is selected as current local body");
    } else {
      //alert("You are offline, please be online to change Local body settings"); 
      this.presentAlert();
    }  
  } 
  getDistrict()
  {
    let loader = this.loadingController.create({
    	content: "Loading District ... "
    });  
    loader.present();
    this.propertyProvider.getDistrict()
   .then(data => {
     var district = JSON.stringify(data);
     this.district = JSON.parse(district);
     loader.dismiss();   
   })
  }
  
  getLBType()
  {
    let loader = this.loadingController.create({
    	content: "Loading Local Body List ... "
    });  
    loader.present();
    this.propertyProvider.getLBType()
    .then(data => {
      var lbtype = JSON.stringify(data);
      this.localbodytype = JSON.parse(lbtype);
      loader.dismiss();   
    })
  }

  async ionViewDidEnter() 
  {
    this.lbname = await this.storage.get('lbname');
   
  } }

```

in that only 3 things are relevant for You

> 1. import { Storage } from ‘@ionic/storage’;

> > 1. // setting values  
> > setLB(LBID,lbname,tnyLBCategory,distid,lbtype)  
> > {  
> > if(this.global1.getnetwork())  
> > {  
> > this.connectivityFlag = true;  
> > this.storage.set(‘lbid’, LBID);  
> > this.storage.set(‘lbname’, lbname);  
> > this.storage.set(‘distid’, distid);  
> > this.storage.set(‘lbtype’, lbtype);  
> > this.global1.showToast(lbname+" is selected as current local body");  
> > } else {  
> > //alert(“You are offline, please be online to change Local body settings”);  
> > this.presentAlert();  
> > }  
> > }

> > 1. //getting a value  
> > async ionViewDidEnter()  
> > {  
> > this.lbname = await this.storage.get(‘lbname’);  
> > }

I will check my first source code and reply you…

Anes

---

<div class="post-metadata">

**Author:** ![naveesh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/naveesh/32/118284_2.png) [@naveesh](https://forum.ionicframework.com/u/naveesh)\
**Post date:** [March 23, 2018, 10:11am UTC](https://forum.ionicframework.com/t/storing-and-fetching-form-values-ionic3/125599/5 "2018-03-23T10:11:56Z")

</div>

working now tq so much.

---

<div class="post-metadata">

**Author:** ![anespa](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/anespa/32/116051_2.png) [@anespa](https://forum.ionicframework.com/u/anespa)\
**Post date:** [March 23, 2018, 10:14am UTC](https://forum.ionicframework.com/t/storing-and-fetching-form-values-ionic3/125599/6 "2018-03-23T10:14:04Z")

</div>

Welcome @naveesh

🏺

---

<div class="post-metadata">

**Author:** ![naveesh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/naveesh/32/118284_2.png) [@naveesh](https://forum.ionicframework.com/u/naveesh)\
**Post date:** [March 23, 2018, 10:27am UTC](https://forum.ionicframework.com/t/storing-and-fetching-form-values-ionic3/125599/7 "2018-03-23T10:27:18Z")

</div>

how do i print or display localstorage data in html file ionic 3  
pls do me this favour .  
Thank you so much in advance

---

<div class="post-metadata">

**Author:** ![anespa](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/anespa/32/116051_2.png) [@anespa](https://forum.ionicframework.com/u/anespa)\
**Post date:** [March 23, 2018, 10:29am UTC](https://forum.ionicframework.com/t/storing-and-fetching-form-values-ionic3/125599/8 "2018-03-23T10:29:15Z")

</div>

> [@anespa](#):
>
> this.lbname = await this.storage.get(‘lbname’);

suppose this is variable

> this.lbname = await this.storage.get(‘lbname’);

then in html {lbname} is enough

---

<div class="post-metadata">

**Author:** ![naveesh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/naveesh/32/118284_2.png) [@naveesh](https://forum.ionicframework.com/u/naveesh)\
**Post date:** [March 23, 2018, 10:42am UTC](https://forum.ionicframework.com/t/storing-and-fetching-form-values-ionic3/125599/9 "2018-03-23T10:42:20Z")

</div>

when u go to add-bike.ts how do i print that console data in add-html

bike.html

 Bike X ![]()

Name: {{bike.name}}

Vehicle Name: {{bike.bname}}

Vehicle.No: {{bike.no}}

 Service Insurance + 

**bike.ts**

import { Component } from ‘@angular/core’;  
import { IonicPage, NavController, NavParams, AlertController} from ‘ionic-angular’;  
import { InsPage } from ‘…/ins/ins’;  
import { SerPage } from ‘…/ser/ser’;  
import { AddBikePage } from ‘…/add-bike/add-bike’;  
import { AddSerPage } from ‘…/add-ser/add-ser’;  
import { Data } from ‘…/…/providers/data/data’;  
import { Storage } from ‘@ionic/storage’

/\*\*

- Generated class for the BikePage page.
- 
- See [https://ionicframework.com/docs/components/#navigation](https://ionicframework.com/docs/components/#navigation) for more info on
- Ionic pages and navigation.  
\*/

@IonicPage()  
@Component({  
selector: ‘page-bike’,  
templateUrl: ‘bike.html’,  
})  
export class BikePage {

constructor(public storage:Storage,public alertCtrl: AlertController,public navCtrl: NavController, public navParams: NavParams, public dataService: Data) {  
}

public bikes = [];

ins(){  
this.navCtrl.push(InsPage);  
}

ser(){  
// this.navCtrl.push(SerPage);  
this.navCtrl.push(AddSerPage);  
}

AddBike(){  
this.storage.set(‘name’, ‘Anes’);  
this.storage.set(‘age’, ‘52’);  
let your = { “name”: “John”, “age”: 30, “car”: " " };  
this.storage.set(‘my-json’, your);  
console.log(this.storage.set(‘my-json’, your));  
console.log(this.storage.set(‘age’, ‘52’));  
this.navCtrl.push(AddBikePage);  
}

ionViewDidLoad() {  
this.dataService.getData().then((todos) =\> {  
if(todos){  
this.bikes = [todos];  
}  
});  
}  
// Deleting item  
remove(no) {  
(this.bikes).splice(no, 1);  
window.localStorage.clear();  
};

presentConfirm(){  
let alert = this.alertCtrl.create({  
// window.localStorage.getItem();  
inputs: [  
{  
name: ‘Name’,  
placeholder: ‘Name’,  
value: ‘{{ service.city | json }}’,  
},  
{  
name: ‘Bike Name’,  
placeholder: ‘Bike Name’,  
value: ‘{{ bike.bname | json }}’,  
},  
{  
name: ‘Registration Number’,  
placeholder: ‘Bike Registration Number’,  
value: ‘{{ bike.no | json }}’,  
},  
],  
subTitle: ‘Edit Quick Info’,  
buttons: [‘Save’]  
});  
alert.present();  
}  
}

**add-bike.html**

 Add Bike Name Bike Name Reg No 

Add Todo

**add-bike.ts**

import { Component } from ‘@angular/core’;  
import { IonicPage, NavController, NavParams, AlertController } from ‘ionic-angular’;  
import { BikePage } from ‘…/bike/bike’;  
import { Data } from ‘…/…/providers/data/data’;  
import { Injectable } from ‘@angular/core’;  
import { FormBuilder, FormGroup, Validators } from ‘@angular/forms’;  
import { Storage } from ‘@ionic/storage’;  
/\*\*

- Generated class for the AddBikePage page.
- 
- See [https://ionicframework.com/docs/components/#navigation](https://ionicframework.com/docs/components/#navigation) for more info on
- Ionic pages and navigation.  
\*/

@IonicPage()  
@Component({  
selector: ‘page-add-bike’,  
templateUrl: ‘add-bike.html’,  
})  
export class AddBikePage {  
bike = {}  
constructor(public storage: Storage,public alertCtrl: AlertController, public navCtrl: NavController, public navParams: NavParams, public dataService: Data) {  
}

async showDetails() {  
let name = await this.storage.get(‘name’);  
let age = await this.storage.get(‘age’);  
this.storage.get(‘my-json’).then((val) =\> {  
console.log(‘Your Name is’,val.name);  
console.log(‘Your Age is’, val.age);  
console.log(‘Your Car is’, val.car);  
});  
if (name == ‘Anes’) {  
alert(“Hi good”);  
}

}  
ionViewDidLoad() {  
console.log(‘ionViewDidLoad PeoplePage’);  
}

async ionViewDidEnter() {

```
await this.showDetails();

```

}

bikeCreate() {  
let alert = this.alertCtrl.create({  
subTitle: ‘Successfully Submitted!’,  
buttons: [‘OK’]  
});  
alert.present();  
this.dataService.save(this.bike);  
this.navCtrl.push(BikePage);  
}  
}

---

<div class="post-metadata">

**Author:** ![naveesh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/naveesh/32/118284_2.png) [@naveesh](https://forum.ionicframework.com/u/naveesh)\
**Post date:** [March 23, 2018, 10:58am UTC](https://forum.ionicframework.com/t/storing-and-fetching-form-values-ionic3/125599/10 "2018-03-23T10:58:59Z")

</div>

this didnt work

Error: Template parse errors:  
Unexpected character “EOF” (Do you have an unescaped “{” in your template? Use “{{ ‘{’ }}”) to escape it.) ("

[ERROR -\>]"): ng:///AppModule/BikePage.html@50:0 Invalid ICU message. Missing '}'. (" [ERROR -\>]"): ng:///AppModule/BikePage.html@50:0 at syntaxError (http://localhost:8100/build/vendor.js:75023:34) at DirectiveNormalizer.\_preparseLoadedTemplate (http://localhost:8100/build/vendor.js:77704:19) at http://localhost:8100/build/vendor.js:77684:76 at Object.then (http://localhost:8100/build/vendor.js:75012:77) at DirectiveNormalizer.\_preParseTemplate (http://localhost:8100/build/vendor.js:77684:26) at DirectiveNormalizer.normalizeTemplate (http://localhost:8100/build/vendor.js:77662:36) at CompileMetadataResolver.loadDirectiveMetadata (http://localhost:8100/build/vendor.js:89335:75) at http://localhost:8100/build/vendor.js:108106:72 at Array.forEach () at http://localhost:8100/build/vendor.js:108105:72

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:44pm UTC](https://forum.ionicframework.com/t/storing-and-fetching-form-values-ionic3/125599/11 "2021-07-19T21:44:03Z")

</div>

Closed on July 19, 2021, 9:44pm UTC