Storing and fetching form values ionic3


#1

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


#2

Dear Naveesh,

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

Download sample project

Thanks

Anes


#3

there are many errors


#4

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…

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


#5

working now tq so much.


#6

Welcome @naveesh

:amphora:


#7

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


#8

suppose this is variable

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

then in html {lbname} is enough


#9

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’

/**

@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’;
/**

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


#10

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