3

I need to grab reactive form inputs email and password and pass them to my function which calls register service method to register new user in firebase using email. Unfortunately, in chrome console after form submission I get RegisterComponent.html:2 ERROR ReferenceError: email is not defined

My code looks like this now:

register.component.ts

export class RegisterComponent {
  form: FormGroup;

  constructor(fb: FormBuilder, private authService: AuthService) {
    this.form = fb.group({
  email:['',Validators.required ],
  password:['',Validators.compose([Validators.required,
    PasswordValidator.cannotContainSpace])]
    })
    email = this.form.controls['email'].value;
    password = this.form.controls['password'].value;
   }


   signInWithEmail() {
     this.authService.regUser(this.email, this.password);
   }
}

my AuthService file:

 regUser() {
    firebase.auth().createUserWithEmailAndPassword(email, pass)
 .catch(function(error) {
   // Handle Errors here.
   var errorCode = error.code;
   var errorMessage = error.message;
   // ...
 });
console.log(this.form.controls['email'].value);
    }

It's just part of my code that relates to the question. I'm not including register form as it's big and messy so I don't think you need to see it. Thanks in advance.

EDIT:

register.component.html 

<div class="container">
<form [formGroup]="form" (ngSubmit)="signInWithEmail()">
    <div class="form-group">
       <label for="email">Email</label>
        <input type="email" class="form-control" formControlName="email">
       <div *ngIf="form.controls.email.touched
        && !form.controls.email.valid" class="alert alert-danger">
            Email is required
       </div>
    </div>
    <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" formControlName="password">
    <div *ngIf="form.controls.password.touched && form.controls.password.errors">
        <div *ngIf="form.controls.password.errors.invalidLogin"
class="alert alert-danger">
            Email or password is invalid.
        </div>
        <div *ngIf="form.controls.password.errors.required"
class="alert alert-danger">
            Password is required.
        </div>
        <div *ngIf="form.controls.password.errors.cannotContainSpace"
class="alert alert-danger">
            Password cannot contain space.
        </div>
    </div>
</div>

    <button class="btn btn-primary" type="submit">Register</button>

</form>
</div>

enter image description here

Limpuls
  • 856
  • 1
  • 19
  • 37

1 Answers1

6

You can get value of your reactive form by using following: 

signInWithEmail() {
     const formValue = this.form.value;
     this.authService.regUser(formValue.email, formValue.password);
}

BTW, i think you should adjust your regUser method parameter inside your service to make it take these both parameter:

Your service

regUser(email, pass) {
    firebase.auth().createUserWithEmailAndPassword(email, pass)
 .catch(function(error) {
   // Handle Errors here.
   var errorCode = error.code;
   var errorMessage = error.message;
   // ...
 });
    }
billyjov
  • 2,778
  • 19
  • 35
  • Doesn't work. Getting same error `formValue is not defined`. Updated to your code and changed `regUser` in auth service to take the same parameters `formValue.email` and `formValue.password` – Limpuls Dec 06 '18 at 22:59
  • Updated OP with register component template – Limpuls Dec 06 '18 at 23:01
  • Where does your prorgamm throw an error? ...Your `regUser() {` should take two paramaters – billyjov Dec 06 '18 at 23:09
  • I just made a SS of error. My auth service looks like this `regUser() { firebase.auth().createUserWithEmailAndPassword(formValue.email, formValue.password)` – Limpuls Dec 06 '18 at 23:20
  • No..You cannot pass formValue into your service directly..I edited my post...you should change your `regUser()` to `regUser(email, pass)` ..then `firebase.auth().createUserWithEmailAndPassword(email, pass)`.. – billyjov Dec 06 '18 at 23:39
  • Thanks, I looked at the different place and didn't see that regUser had no parameters. It's late and I overlooked it. Works fine now. – Limpuls Dec 07 '18 at 00:52