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);
});
});
}
}