向Firebase提交数据时遇MISSING_EMAIL错误的解决请求

问题根源 #

你的MISSING_EMAIL错误是因为表单的邮箱输入框name属性和组件中读取的字段不匹配：

• HTML里邮箱输入框的name设为了username，但组件代码里你尝试从f.value.email获取邮箱值，这会导致email变量实际是undefined，传给后端时缺少必要的email参数。

修复步骤 #

1. 修正HTML表单的邮箱输入框name属性 #

把输入框的name="username"改成name="email"，确保表单能正确收集邮箱值：

<h3>Welcome to Login Page</h3>
<form #f="ngForm" (ngSubmit)="onSubmit(f)">
    <div>
        <label>Username:</label>
        <div>
            <input type="text"
            ngModel
            required
            email
            name="email" <!-- 此处修改为email -->
            #username="ngModel"
            >
            </div>
        <label>Password:</label>
            <div>
            <input type="password"
            ngModel
            required
            name="password"
            minlength="6"
            #password="ngModel"
            >
        </div>
        <div>
            <button 
            class="btn btn-success" 
            [disabled]="!f.valid" <!-- 建议改为验证整个表单，避免仅判断密码 -->
            type="submit">
            Login</button>
            <button 
            class="btn btn-success" 
            type="button">
            Sign Up</button>
        </div>
    </div>
</form>

2. （可选）简化组件代码 #

可以用解构赋值直接获取表单值，让代码更简洁：

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { authService } from './Auth.service';

export class AuthComponent {

    constructor(private authService:authService){}
    
    onSubmit(f:NgForm){
      const { email, password } = f.value; // 解构直接获取表单字段
      console.log(f.value);
      this.authService.signUpUser(email , password).subscribe(
          response => {console.log(response)},
          error => {console.log(error)},
          );
    }
}

验证修复效果 #

提交表单前先查看控制台的console.log(f.value)输出，确认里面包含email字段和正确的邮箱值，再发起请求就不会出现MISSING_EMAIL错误了。

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