如何在Angular中获取反应形式输入的值? [英] How to get values of reactive form inputs in Angular?

问题描述

我需要获取反应形式输入email和password并将它们传递给我的函数，该函数调用注册服务方法以使用电子邮件在Firebase中注册新用户.不幸的是，在提交表单后，在chrome控制台中，我得到RegisterComponent.html:2 ERROR ReferenceError: email is not defined

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

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文件:

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.

register.component.html

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>

推荐答案

您可以使用以下方法获得反应式的价值:

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

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

顺便说一句，我认为您应该在服务中调整您的regUser方法参数，以使其同时具有这两个参数:

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

您的服务

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

这篇关于如何在Angular中获取反应形式输入的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！