Submit a form to Firebase in Angular 2

Question

I would like to submit a form with Angular 2, but the following code is not working for me :

signup.component.html

   <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
        <form (ngSubmit)="onSignup(f)" #f="ngForm">
            <div class="form-group">
                <label for="email">Email adress</label>
                <input type="email" id="email" name="email" ngModel class="form-control">
            </div>
            <div class="form-group">
                <label for="password"> Password</label>
                <input type="password" id="password" name="password" ngModel class="form-control">
            </div>
            <button class="btn btn-primary" type="submit">Sign Up</button>
        </form>
    </div>
</div>

signup.component.ts

export class SignupComponent implements OnInit{
   constructor(private authService:AuthService){}

   ngOnInit(){ }

   onSignup(form: NgForm){
      const email = form.value.email;
      const password = form.value.password;
      this.authService.signupUser(email, password);
   }
}

app.component.ts

The Firebase application is initialized in the app component.

import * as firebase from 'firebase'
export class AppComponent implements OnInit {

    ngOnInit(){
       var config = {
       // keys
      };
    firebase.initializeApp(config);
    }
}

systemjs.config.js

The firebase module is mapped for typing.

   map: {
        app: 'app',
        'firebase': 'npm:firebase/firebase.js
    },

auth.service.ts

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/fromPromise';
import * as firebase from 'firebase';
    export class AuthService{
        signupUser(email: string, password: string){
            console.log('service triggered');
            var subscription = Observable.fromPromise(firebase.auth().createUserWithEmailAndPassword(email, password));
                subscription.subscribe(firebaseUser => console.log(':)'),
                                   error => console.log(error));
        }
    }

Console is giving error on loading :

EXCEPTION: firebase.initializeApp is not a function

I assume this is a http-request and you mean that the request isn't fired... You need to subscribe to your request so that it will be fired... `this.authService.signupUser(email, password).subscribe(data => console.log(data))` — AT82, May 20 '17 at 19:22
@AJT_82 Using this http://stackoverflow.com/questions/39319279/convert-promise-to-observable is reloading the app, but do not save the user in Firebase. — amazingcode12, May 20 '17 at 19:37
if you place "console.log('hi')" before " this.authService.signupUser(email, password)" statement - did it write something? — happyZZR1400, May 20 '17 at 20:06
@happyZZR1400 It is not writing anything, but when I am filling the fields and submit it, I can see in the console that requests to the localhost to get background images have changed URL and contains the credentials ?email=teemail%40test.com&password=H457Gffj — amazingcode12, May 20 '17 at 20:12
that means that your 'onSignup' method of component not triggered — happyZZR1400, May 20 '17 at 20:14
Maybe you should show the code for the `authService.signupUser()` method. As stated above by AJT_82, it sounds like you just need to subscribe to the observable that is returned by that method so that the actual HTTP request gets made. But you linked to some other stack overflow answer doing something similar, and indicated that it reloads the page. It should never reload the page, so there is something fishy going on in `authService.signupUser()`. — Sunil D., May 20 '17 at 20:16
@happyZZR1400 Do you see an error in signup component template? — amazingcode12, May 20 '17 at 20:20
@SunilD. The post was not saying that it should reload the page, but the code is actually doing it. — amazingcode12, May 20 '17 at 20:21

score 1 · Answer 1 · answered May 20 '17 at 20:31

1

In your signup.component.html there is no input for password, only email. Could it be that you onSignup is failing at that point?

Also, if you page is being reloaded, try adding return false as the last line in onSignup method.

answered May 20 '17 at 20:31

Huske

9,186
2
36
53

1

Good catch... for further reading, here is a similar question w/answers along the same lines that you have stated: http://stackoverflow.com/q/39203428/398606 – Sunil D. May 20 '17 at 20:36
I edited the html for the complete one with password field and returning false as the last line in onSignup method is not fixing the fact that the page is reloading on the trigger of the Submit button. – amazingcode12 May 20 '17 at 20:38
@SunilD. Preventing default and adding the $event is at least making the component calling the service, but is not signing up a new user in Firebase. – amazingcode12 May 20 '17 at 20:42

Submit a form to Firebase in Angular 2

1 Answers1