how to fetch and store form values in local storage ionic 3
Dear Naveesh,
Please set this sample project with node installation , you will get your solution
Thanks
Anes
there are many errors
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
- import { Storage } from ‘@ionic/storage’;
- // 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();
}
}
- //getting a value
async ionViewDidEnter()
{
this.lbname = await this.storage.get(‘lbname’);
}
I will check my first source code and reply you…
Anes
working now tq so much.
Welcome @naveesh
how do i print or display localstorage data in html file ionic 3
pls do me this favour .
Thank you so much in advance
suppose this is variable
this.lbname = await this.storage.get(‘lbname’);
then in html {lbname} is enough
when u go to add-bike.ts how do i print that console data in add-html
bike.html
Bike XName: {{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 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 NoAdd 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 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);
}
}
this didnt work
Error: Template parse errors:
Unexpected character “EOF” (Do you have an unescaped “{” in your template? Use “{{ ‘{’ }}”) to escape it.) ("