Dear,
I am trying to save data to firebase. Following is the html:
<ion-header>
<ion-navbar>
<ion-title>Create New Bill</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<form (ngSubmit)="form()">
<ion-list>
<ion-item><p class="photo"><button ion-button (click)="takePhoto()"><ion-icon name="camera" class="pic"></ion-icon> Customer Picture</button></p></ion-item>
<ion-input [(ngModel)]="fullname" type="text" placeholder="Customer Full Name" name="fullname"></ion-input>
<ion-input [(ngModel)]="mobile" type="number" placeholder="Mobile Number" name="mobile"></ion-input>
<ion-item>
<ion-label>Purchase Date</ion-label>
<ion-datetime displayFormat="D MM, YY" [(ngModel)]="purchaseDate" name="purchaseDate"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Due Date</ion-label>
<ion-datetime displayFormat="D MM, YY" [(ngModel)]="dueDate" name="dueDate"></ion-datetime>
</ion-item>
<div text-center><button ion-button small full color="secondary" center (click)="addItems()">Add Purchase Items</button></div>
<ion-label center>Items Added</ion-label>
<ion-item>Total Bill Value: Rs. {{getTotal()}}</ion-item>
<ion-item *ngFor="let item of itemList | async" (click)="showOptions(item.$key, item.name, item.quantity, item.units, item.price)" #slidingItem>
<ion-col>{{item.name}}</ion-col>
<ion-col>{{item.quantity}} </ion-col>
<ion-col>{{item.units}} </ion-col>
<ion-col>Rs. {{item.price}}</ion-col>
</ion-item>
<ion-item class="reg_terms">
<ion-checkbox secondary name="terms" value="" checked="false" ></ion-checkbox>
<ion-label>I accept the <a href="#">Terms & Conditions</a></ion-label>
</ion-item>
<button ion-button full type="submit" (ngSubmit)="form()">Save Bill</button>
</ion-list>
</form>
</ion-content>
Following is the ts:
import { Form } from '@angular/forms/forms';
import { Item } from 'ionic-angular/umd';
import { IonicStorageModuleNgFactory } from '@ionic/storage/es2015/index.ngfactory';
import { ActionSheetController } from 'ionic-angular';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController, ToastController, ModalController } from 'ionic-angular';
import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database';
import { FirebaseProvider } from '../../providers/firebase/firebase';
import firebase from 'firebase';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
@IonicPage()
@Component({
selector: 'page-create-bill',
templateUrl: 'create-bill.html',
})
export class CreateBillPage {
itemList: FirebaseListObservable<any[]>;
billForm: FirebaseListObservable<any[]>;
item: any;
key: any;
bills: any;
name: any;
quantity: any;
unit: any;
price: number;
itemId: string;
itemName: any;
itemQuantity: any;
itemUnit: any;
itemPrice: number;
totalAmount: any;
productPrice: number;
total: any;
constructor(public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController,
public angFire: AngularFireDatabase, public toastCtrl: ToastController, public firebaseData: FirebaseProvider,
public actionSheetCtrl: ActionSheetController, public modalCtrl: ModalController
) {
this.itemList = angFire.list('/Items');
this.billForm = angFire.list('/Bills');
}
takePhoto(){
}
addItems(){
let prompt = this.alertCtrl.create({
title: 'Purchase Items',
message: 'Enter Item details for purchase',
inputs: [
{
name: 'name',
placeholder: 'Item Name'
},
{
name: 'quantity',
placeholder: 'Quantity',
type: 'number'
},
{
name: 'units',
placeholder: 'Grams, KG, Inches etc',
},
{
name: 'price',
placeholder: 'Price Name',
}
],
buttons: [
{
text: 'Cancel',
handler: data => {
console.log('Cancel clicked')
}
},
{
text: 'Save',
handler: data =>{
this.itemList.push({
name: data.name,
quantity: data.quantity,
units: data.units,
price: data.price
})
}
}
]
});
prompt.present();
}
showOptions(itemId: any, itemName: any, itemQuantity: any, itemUnit: any, itemPrice: any){
let actionSheet = this.actionSheetCtrl.create({
title: 'What do you want to do?',
buttons: [
{
text: 'Delete Item',
role: 'destructive',
handler: () => {
this.removeItem(itemId);
}
}, {
text: 'Update Item',
handler: () => {
this.updateItem(itemId, itemName, itemQuantity, itemUnit, itemPrice);
}
}, {
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked')
}
}
]
});
actionSheet.present();
}
removeItem(itemId: string){
this.itemList.remove(itemId);
}
updateItem(itemId: any, itemName: any, itemQuantity: any, itemUnit: any, itemPrice: any){
let prompt = this.alertCtrl.create({
title: 'Item Name',
message: "Update the name for this item",
inputs: [
{
name: 'name',
placeholder: 'Item Name',
value: itemName
},
{
name: 'quantity',
placeholder: 'Quantity',
value: itemQuantity
},
{
name:'units',
placeholder: 'Unit',
value: itemUnit
},
{
name: 'price',
placeholder: 'Price',
value: itemPrice
}
],
buttons: [
{
text: 'Cancel',
handler: data => {
console.log('Update canceled')
}
},
{
text: 'Save',
handler: data => {
this.itemList.update(itemId, {
name: data.name,
quantity: data.quantity,
units: data.units,
price: data.price
})
}
}
]
});
prompt.present();
}
getTotal(){
this.itemPrice += this.itemPrice
return this.itemPrice;
}
form(){
this.billForm.push({
fullname : this.bills.fullname,
mobile: this.bills.mobile,
})
}
}
My problem is with the Save it to firebase … the error is 'Cannot read property ‘fullname’ of undefined… kindly help