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

【问题标题】：message: "createUserWithEmailAndPassword failed: First argument "email" must be a valid string."消息：“createUserWithEmailAndPassword 失败：第一个参数“email”必须是有效字符串。”
【发布时间】：2019-08-07 10:27:47
【问题描述】：

我已经创建了带有 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);
 }
}

我已经创建了身份验证服务

import  * as firebase  from 'firebase/app';

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

}

【问题讨论】：

欢迎来到 StakOverflow。我在 Angular 方面的经验为 0，但在我看来 email 不是有效的输入类型。或者你还没有关闭标签。或两者兼而有之。
您将form.value.name; 作为电子邮件传递。也许应该是form.value.email;？
是的.. 谢谢.. 我差点忘了那个。

标签： angular validation firebase-authentication

【解决方案1】：

对于password 和email 的值，我会使用绑定到ngModel 的模板驱动表单，例如stackblitz：

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>

【讨论】：