代码之家 › 专栏 › 技术社区 › Limpuls

如何获得角度反馈形式输入的值?

angular-reactive-forms angular-services firebase-authentication firebase angular

Limpuls · 技术社区 · 6 年前

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

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

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

这只是我代码中与问题相关的一部分。我不包括登记表,因为它又大又乱,所以我认为你们不需要看它。提前谢谢。

<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>

1 回复 | 直到 6 年前

billyjov 6 年前

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

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