Question

我已经使用Firebase身份验证创建了注册表单。我在下面的代码中已在可视代码编辑器中安装了firebase 然后每当我提交表格时都会出错

消息：createUserWithEmailAndPassword失败：第一个参数“ email”必须是有效的字符串。

我已经使用调试器检查了代码，它将显示电子邮件未定义，但是我将获得密码值。

因此，每当我将这两个值传递给身份验证功能时，它将抛出错误消息。角版本：6.0和Firebase版本：5.9.0

signup.component.html

<div class="row">
  <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-1">
    <form (ngSubmit)="onSignup(f)" #f="ngForm">
      <div class="form-group">
        <label for="email">Mail</label>
        <input type="email"
          name="email" id="email"
          ngModel
          class="form-control"
         />
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input  
          class="form-control" 
          type="password" 
          id="password" 
          name="password" 
          ngModel
        />
      </div>
      <button class="btn btn-primary" type="submit">SignUp</button>
    </form>
  </div>
</div>

signup.component.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-signin',
  templateUrl: './signup.component.html'
})
export class SignupComponent implements OnInit {
  constructor(private authService:AuthService){}
  ngOnInit(){}

 onSignup(form:NgForm)
 {
  const email = form.value.name;
   const password = form.value.password;
   this.authService.signupUser(email,password);
 }
}

我已经创建了authservice

import  * as firebase  from 'firebase/app';

export class AuthService
{
    signupUser(email: string, password: string) {
        firebase.auth().createUserWithEmailAndPassword(email, password)
          .catch(
            error => console.log(error)
          )
      }

}

Answer 1

对于ngModel的值，我将使用password的绑定，对于stackblitz这样的模板驱动格式，我将使用email的绑定：

signup.component.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-signin',
  templateUrl: './signup.component.html'
})
export class SignupComponent implements OnInit {
  emailVal: string;
  passwordVal: string;

  constructor(private authService:AuthService){}

  onSignup() {
    this.authService.signupUser(this.emailVal, this.passwordVal);
  }

  ngOnInit() {}
  ...

signup.component.html

<div class="row">
  <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-1">
  <form (ngSubmit)="onSignup()" #f="ngForm">
    <div class="form-group">
      <label for="email">Mail</label>
      <input type="email"
        name="email" id="email"
        [ngModel]="emailVal"
        class="form-control"
      />
    </div>
    <div class="form-group">
      <label for="password">Password</label>
        <input  
          class="form-control" 
          type="password" 
          id="password" 
          name="password" 
          [ngModel]="passwordVal"
       />
      </div>
      <button class="btn btn-primary" type="submit">SignUp</button>
    </form>
  </div>
</div>

消息：“ createUserWithEmailAndPassword失败：第一个参数“ email”必须为有效字符串。

1 个答案: