Как получить значения входов реактивной формы в Angular? - PullRequest
Новая
       19

Как получить значения входов реактивной формы в Angular?

0 голосов
/ 07 декабря 2018

Мне нужно получить входные данные реактивной формы email и password и передать их моей функции, которая вызывает метод службы регистрации, чтобы зарегистрировать нового пользователя в firebase с помощью электронной почты.К сожалению, в консоли Chrome после отправки формы я получаю RegisterComponent.html:2 ERROR ReferenceError: email is not defined

Мой код выглядит следующим образом:

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

мой файл AuthService:

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

Это только часть моего кода, которая связана с этим вопросом.Я не включаю регистрационную форму, так как она большая и грязная, поэтому я не думаю, что вам нужно ее видеть.Заранее спасибо.

РЕДАКТИРОВАТЬ:

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

1 Ответ

0 голосов
/ 07 декабря 2018

Вы можете получить значение своей реактивной формы, используя следующее: 

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

Кстати, я думаю, вам следует настроить параметр метода regUser внутри службы, чтобы он принимал оба параметра:

Ваш сервис 

regUser(email, pass) {
    firebase.auth().createUserWithEmailAndPassword(email, pass)
 .catch(function(error) {
   // Handle Errors here.
   var errorCode = error.code;
   var errorMessage = error.message;
   // ...
 });
    }
...