如何在Angular中获取响应式表单输入的值？

Question

我需要获取响应式表单输入的电子邮件和密码，并将它们传递给我的函数，该函数调用注册服务方法使用电子邮件在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>

- Limpuls

---

将您的类添加到 https://stackblitz.com 中以重现该问题。 - billyjov

Answer 1

您可以通过以下方式获取您的响应式表单值：

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

- billyjov

---

无法工作。出现相同的错误“formValue未定义”。根据您的代码进行了更新，并在auth服务中更改了'regUser'以使用相同的参数'formValue.email'和'formValue.password'。 - Limpuls

更新了 OP，并且添加了注册组件模板。 - Limpuls

你的程序在哪里抛出错误？...你的 regUser() { 应该接受两个参数。 - billyjov

我刚刚截取了一个错误的屏幕截图。我的认证服务看起来像这样 regUser() { firebase.auth().createUserWithEmailAndPassword(formValue.email, formValue.password) - Limpuls

不可以直接将formValue传递到您的服务中。我编辑了我的帖子，您应该将regUser()更改为regUser(email, pass)，然后使用firebase.auth().createUserWithEmailAndPassword(email, pass)。 - billyjov

谢谢，我看了不同的地方，没有发现regUser没有参数。现在已经晚了，我忽略了它。现在可以正常工作了。 - Limpuls