Uncaught (in promise ) : [object Object] Ionic 3 & Angular firebase


#1

While entering data to firebase database I am facing this error Uncaught (in promise ) : [object Object]. I am able to upload image to storage. But when other data like email and password are not being enter. Here I have created my own table to store user data

register.html

<!--
  Generated template for the RegistrationPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Registration</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <form [formGroup]="form" (ngSubmit)="saveUser(form.value)">
    <ion-item>
      <ion-label stacked>Email :</ion-label>
      <ion-input type="text" formControlName="email" [(ngModel)]="userEmail"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label stacked>Password :</ion-label>
      <ion-input type="text" formControlName="password" [(ngModel)]="userPassword"></ion-input>
    </ion-item>
    <ion-item>
      <span ion-text color="danger" block text-center padding-top padding-bottom (click)="selectImage()">Select an image</span>
      <input type="hidden" name="image" formControlName="image" [(ngModel)]="userImage">
      <img [src]="userImage">
    </ion-item>

    <ion-item>
      <!-- <button ion-button block color="primary" text-center padding-top padding-bottom [disabled]="!form.valid"> -->
      <button ion-button block color="primary" text-center padding-top padding-bottom >
            <div>
               Register
            </div>

            </button>
    </ion-item>
    </form>

</ion-content>

register.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';

import { UserProvider } from './../../../providers/database/user/user';
import { PreloaderProvider } from './../../../providers/preloader/preloader';
import { ImageProvider } from './../../../providers/image/image';

import { User } from '../../../models/user';
import * as firebase from 'firebase';

/**
 * Generated class for the RegistrationPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-registration',
  templateUrl: 'registration.html',
})
export class RegistrationPage {
  public form: any;
  public userImage: any;
  public users: any;
  public userEmail : any = ' ';
  public userPassword : any = '';
  public userPic : any = ' ';
  public userId : string = ' ';



  constructor(
    private _FB: FormBuilder,
    private _IMG: ImageProvider,
    public viewCtrl: ViewController,
    private _LOADER: PreloaderProvider,
    private _DB: UserProvider,
    public navCtrl: NavController, public navParams: NavParams) {

      this.form  = _FB.group({
        'email' : [' ', Validators.required],
        'password' : [' ', Validators.required],
        'image' : [' ', Validators.required]
      });
      this.users = firebase.database().ref('users/');
  }

  saveUser(val) {
    this._LOADER.displayPreloader();

    let email: string = this.form.controls["email"].value,
      password: string = this.form.controls["password"].value,
       image : string = this.userImage;
    
       console.log(email + password + image);
       this._DB.uploadImage(image)
       .then((snapshot : any) => {
         
         let uploadImage : any = snapshot.downloadURL;

         this._DB.addToDatabase({
            email : email,
            password : password,
            image : uploadImage
         })
         .then((data)=> {
          this._LOADER.hidePreloader();
         });
       });
  }

  selectImage() {
    this._IMG.selectImage()
      .then((data) => {
        this.userImage = data;
      });
  }


}

user.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';


import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import * as firebase from 'firebase';

/*
  Generated class for the UserProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class UserProvider {

  constructor(public http: Http) {
    console.log('Hello UserProvider Provider');
  }
  renderUsers(): Observable<any> {

    return new Observable(observer => {
      let users: any = [];
      firebase.database().ref('users').orderByKey().once('value', (items: any) => {
        items.forEach((item) => {
          users.push({
            id: item.key,
            email: item.val().email,
            password: item.val().password,
            image: item.val().image
          });
        });

        observer.next(users);
        observer.complete();
      },
        (error) => {
          console.log("Observer error: ", error);
          console.dir(error);
          observer.error(error)
        });

    });
  }


  addToDatabase(userObj): Promise<any> {
    return new Promise((resolve) => {
      let addRef = firebase.database().ref('users');
      addRef.push(userObj);
      resolve(true);
    });
  }

  updateDatabase(id, userObj) : Promise<any>
  {
    return new Promise((resolve) => {
      var updateRef = firebase.database().ref('users').child(id);
      updateRef.update(userObj);
      resolve(true);
    });
  }

  deleteDatabase(id) : Promise<any>
  {
    return new Promise((resolve) => {
      let ref = firebase.database().ref('users').child(id);
      ref.remove();
      resolve(true);
    });
  }

  uploadImage(imageString) : Promise<any>
  {
    let image : string = 'user-' + new Date().getTime() + '.jpg',
         storageRef : any,
         parseUpload : any;

         return new Promise((resolve, reject) => {
           storageRef = firebase.storage().ref('users/' + image);
           parseUpload = storageRef.putString(imageString, 'data_url');

           parseUpload.on('stage_change', (_snapshot) => {

           },
           (_err) => {
             reject(_err);
           },
          (success) => {
            resolve(parseUpload.snapshot);
          });
       });
  }


}


#2

tuviste éxito?, yo tengo exactamente el mismo problema


#3

Hi,Please once check,close the application,then open the application after run the application,and also when error show ,that time save again then run it,i don’t know.Maybe try it.