<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>
and how to retrive and display in .html file ionic 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);
}
so many errorsā¦pls give exact solution
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
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);
}
});
}
}
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ā.
1 Like
hi i am beginner to ionic,could u pls explain how to do
āpassing stuff between pagesā