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>