Angular响应式表单调用Firebase createUserWithEmailAndPassword参数无效报错

你遇到这个报错的核心原因是：在Angular响应式表单中，你没有正确获取表单控件的值。

原来使用ngModel时，你可以通过组件类里的this.email和this.password直接拿到输入值，但切换到响应式表单后，这两个变量并没有和表单控件绑定——你只是在组件里定义了它们，但从来没给它们赋值，所以传递给createUserWithEmailAndPassword的email参数是无效的（可能是undefined），这才触发了Firebase的报错。

响应式表单提供了两种常用的方式获取字段值，你可以任选其一：

方式1：通过表单组的value属性获取所有字段值 #

这是最简洁的方式，直接从表单组的value对象中解构出需要的字段：

修改你的nuevoUsuario方法如下：

nuevoUsuario() {
  // 先确保表单有效，虽然按钮已经禁用，但双重验证更稳妥
  if (this.forma.invalid) {
    return;
  }

  // 从表单值中解构email和password
  const { email, password } = this.forma.value;

  firebase.auth().createUserWithEmailAndPassword(email, password)
    .then(userData => {
      // 注意：sendEmailVerification是User对象的方法，需要从userData.user中获取
      userData.user?.sendEmailVerification();
      this.router.navigate(['/ingresar']);
      console.log(userData);
    })
    .catch(err => {
      console.log(err);
    });
}

方式2：通过get()方法单独获取控件值 #

如果你只需要单个控件的值，可以用表单组的get()方法获取控件实例，再取其value：

nuevoUsuario() {
  if (this.forma.invalid) {
    return;
  }

  // 单独获取每个控件的值
  const email = this.forma.get('email')?.value;
  const password = this.forma.get('password')?.value;

  firebase.auth().createUserWithEmailAndPassword(email, password)
    .then(userData => {
      userData.user?.sendEmailVerification();
      this.router.navigate(['/ingresar']);
      console.log(userData);
    })
    .catch(err => {
      console.log(err);
    });
}

• 可以删除组件类中定义的email: any; password: string;这两个变量，因为响应式表单不需要它们，留着反而容易造成混淆。
• 你原来的代码中调用userData.sendEmailVerification()是错误的，createUserWithEmailAndPassword返回的是UserCredential对象，需要通过userData.user才能拿到用户实例，进而调用sendEmailVerification方法——上面的代码已经修正了这个问题。

内容的提问来源于stack exchange，提问作者Paco Zevallos