Problem with Save data to firebase

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

Where does this.bills come from suddenly?

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.

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

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

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

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…

Hi is the help still available?