Acepting data from the user and displaying it in a table in another page


#1

I want to create a form which accept the values from the user,stores it ans display it in a table in another page.
I am able to create a form, store the data in the local storage but i am unable to display it in the another page in a table format.
I got number of tutorials which explains how to pass data,but how to show it in a table format is not there…
Please help me with this

This is my createaccountform.html file:


Create Account Create Your Account(s) Name of the Account Pay Budget Period Opening Balance
<label for="yes" class="control-label">Create another Account</label>      <ion-list radio-group >                <input type="radio" (ng-model)="account.yes " name="yes"> YES         <input type="radio" (ng-model)="account.no" name="yes"> NO      </ion-list>              <button ion-button block  (click)="addaccount()" color="blue"> Add Account</button>        
  </ion-list>         </ion-card-content>  </ion-card>  </ion-content>
````Preformatted text`

This is the ts file:

import { Component } from '@angular/core';import { IonicPage, NavController, NavParams } from 'ionic-angular';import{AddaccountProvider} from '../../providers/addaccount/addaccount';
@IonicPage()@Component({  selector: 'page-create-account',  templateUrl: 'create-account.html',})export class CreateAccountPage {
    account :any= {};    registers:any={};            constructor(public navCtrl: NavController, public navParams: NavParams,public store:AddaccountProvider ) {             }
    ionViewDidLoad() {        // console.log('ionViewDidLoad CreateAccountPage');    }    addaccount()    {

            //this.navCtrl.push(CreateAccountPage);            //this.navCtrl.push(AddaccountProvider);        console.log(JSON.stringify(this.account));        //console.log("error");         this.store.set(JSON.stringify(this.account));             }}

this is the table.html file:

  <ion-navbar>    <ion-title>PERMANENT ACCOUNT FORM</ion-title>  </ion-navbar>
</ion-header>

<ion-content class="background"><div class="header" align="center">Permanent Account Form</div>    <table>       <tr>        <td>Name of Account</td>        <td>Pay Budget Period</td>        <td>Opening Balance</td>        <td>Date</td>        <td>Details</td>        <td>Withdrawl</td>        <td>Deposit</td>        <td>Balance</td>      </tr>
      
    </table>  </ion-content>

this is the table.ts file:

import { Component } from ‘@angular/core’;import { IonicPage, NavController, NavParams } from ‘ionic-angular’;import{AddaccountProvider} from’…/…/providers/addaccount/addaccount’;/** * Generated class for the PermaccformPage page. * * See http://ionicframework.com/docs/components/#navigation for more info * on Ionic pages and navigation. */@IonicPage()@Component({ selector: ‘page-permaccform’, templateUrl: ‘permaccform.html’,})export class PermaccformPage { registers:any={};
constructor(public navCtrl: NavController, public navParams: NavParams,public store :AddaccountProvider) { }
ionViewDidLoad() { console.log(‘ionViewDidLoad PermaccformPage’); }
}


this is the provider.ts file:

i

mport { Injectable } from ‘@angular/core’;import { Http } from ‘@angular/http’;import ‘rxjs/add/operator/map’;import{Storage} from’@ionic/storage’;
/* Generated class for the AddaccountProvider provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html for more info on providers and Angular 2 DI.*/@Injectable()export class AddaccountProvider {
constructor(public http: Http,private storage:Storage) { // console.log(‘Hello AddaccountProvider Provider’); }set(account){ this.storage.set(‘create’,account);}get(){ return this.storage.get(‘create’);}delete(){
}}

Please help me in this..
thanks

#2

this is the table.ts file:

import { Component } from '@angular/core';import
 { IonicPage, NavController, NavParams } from 
'ionic-angular';import{AddaccountProvider} 
from'../../providers/addaccount/addaccount';/** * Generated class for 
the PermaccformPage page. * * See http://ionicframework.com/docs/components/#navigation for more info * on Ionic pages and navigation. */@IonicPage()@Component({  selector: 'page-permaccform',  templateUrl: 'permaccform.html',})export class PermaccformPage {  registers:any={};
  constructor(public navCtrl: NavController, public navParams: NavParams,public store :AddaccountProvider) {  }
  ionViewDidLoad() {    console.log('ionViewDidLoad PermaccformPage');  } 
}

this is the providers,ts file:

import { Injectable } from '@angular/core';import { Http } from '@angular/http';import 'rxjs/add/operator/map';import{Storage} from'@ionic/storage';
/*  Generated class for the AddaccountProvider provider.
  See https://angular.io/docs/ts/latest/guide/dependency-injection.html  for more info on providers and Angular 2 DI.*/@Injectable()export class AddaccountProvider {

  constructor(public http: Http,private storage:Storage) {   // 
console.log('Hello AddaccountProvider Provider');  }set(account){  
this.storage.set('create',account);}get(){  return 
this.storage.get('create');}delete(){
}}

#3

Can you read what you have posted without your eyes bleeding? How to post code.


#4

I have posted the question again with proper formatting…thanks for the suggestion.