Problem with Save data to firebase

#1

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>&nbsp; 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

#2

Where does this.bills come from suddenly?

#3

Please replace all instances of any with proper types. Whoever is trying to read your code a month from now, even if it’s you, will greatly thank you.

#4

I endorse that statement 100%. Since taking your advice on that one, my code looks far cleaner, I realized I was using a ton of unnecessary properties, and my eyes have stopped glazing over every time I look at my work. I’m also raiding the Ibuprofen bottle less frequently. Many thanks

#5

I agree with you 100% too… Just did it. Thank you!

#6

Thanks for reply… That’s the wrong way I was trying… Now I am saving data through firebase provider… Its solved!

#7

Hi the same way im trying as you… but i couldn’t push data into firebase… can you get me code there… but i can display the added items on home page…

#8

Hi is the help still available?