How to get values of reactive form inputs in Angular?

Question

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>

Add your class in a stackblitz.com in order to reproduce the issue — billyjov
– billyjov, Commented Dec 6, 2018 at 23:53

billyjov · Accepted Answer · 2018-12-06 23:38:21Z

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

edited Dec 6, 2018 at 23:38

answered Dec 6, 2018 at 22:40

billyjov

2,99021 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Limpuls Over a year ago

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 Over a year ago

Updated OP with register component template

billyjov Over a year ago

Where does your prorgamm throw an error? ...Your regUser() { should take two paramaters

Limpuls Over a year ago

I just made a SS of error. My auth service looks like this regUser() { firebase.auth().createUserWithEmailAndPassword(formValue.email, formValue.password)

billyjov Over a year ago

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)..

|

Collectives™ on Stack Overflow

How to get values of reactive form inputs in Angular?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related