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

查看：21
本文介绍了如何在 Angular 中获取反应形式输入的值?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我的代码现在看起来像这样:

register.component.ts

导出类 RegisterComponent {表格:表格组；构造函数(fb:FormBuilder，私有authService:AuthService){this.form = fb.group({电子邮件:['',Validators.required ],密码:['',Validators.compose([Validators.required,PasswordValidator.cannotContainSpace])]})email = this.form.controls['email'].value;密码 = this.form.controls['password'].value;}登录邮箱(){this.authService.regUser(this.email, this.password);}}

我的 AuthService 文件:

 regUser() {firebase.auth().createUserWithEmailAndPassword(email, pass).catch(函数(错误){//在这里处理错误.var errorCode = error.code;var errorMessage = error.message;//...});console.log(this.form.controls['email'].value);}

这只是与问题相关的代码的一部分.我不包括注册表，因为它又大又乱，所以我认为你不需要看到它.提前致谢.

注册.component.html 

<form [formGroup]="form" (ngSubmit)="signInWithEmail()"><div class="form-group"><label for="email">电子邮件</label><input type="email" class="form-control" formControlName="email"><div *ngIf="form.controls.email.touched&&!form.controls.email.valid" class="alert alert-danger">电子邮件是必需的

<div class="form-group"><label for="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="警报警报-危险">电子邮件或密码无效.

<div *ngIf="form.controls.password.errors.required"class="警报警报-危险">密码是必需的.

<div *ngIf="form.controls.password.errors.cannotContainSpace"class="警报警报-危险">密码不能包含空格.

<button class="btn btn-primary" type="submit">注册</button></表单>

解决方案

您可以使用以下方法获取响应式表单的价值:

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

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

您的服务

regUser(email, pass) {firebase.auth().createUserWithEmailAndPassword(email, pass).catch(函数(错误){//在这里处理错误.var errorCode = error.code;var errorMessage = error.message;//...});}

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>

解决方案

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

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

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆