第一个参数“email”必须是一个有效的字符串。”

Question

我最近在一个项目中使用 Angular2 和材料组件并开发附加到 Firebase 的 sigun 和登录表单。问题是，每当单击登录按钮时，它都会给出错误“ERROR M {code: "auth/argument-error", message: "createUserWithEmailAndPassword failed: First argument "email" must be a valid string."

<form class="example-form" (ngSubmit)="onSignup(f)" #f="ngForm">
      <label class="registr">Registration Form</label>
        <table class="example-full-width" cellspacing="0"><tr>
          <td><mat-form-field class="example-full-width">
            <input matInput id="fname" name="fname" placeholder="First name">
          </mat-form-field></td>

          <td><mat-form-field class="example-full-width">
            <input matInput id="lname" name="lname" placeholder="Last Name">
          </mat-form-field></td>
          </tr></table>

          <mat-form-field>
              <input type="email" matInput placeholder="Enter your email" id="email" name="email" [formControl]="email" required>
              <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
          </mat-form-field>

        <mat-form-field>
            <input type="password" matInput placeholder="Enter your password" id="password" name="password" [type]="hide ? 'password' : 'text'">
            <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
          </mat-form-field>
        <button type="button" class="btn btn-info d-none d-lg-block m-l-15" type="submit">Sign Up</button>
      </form>

注册组件.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import {FormControl, Validators} from '@angular/forms';

import { AuthService } from '../auth.service';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})

export class SignupComponent implements OnInit {
  hide = true;
  //name:string = "irf";
  constructor(private authService: AuthService) { }

  ngOnInit() {
  }

  email = new FormControl('', [Validators.required, Validators.email]);

  getErrorMessage() {
    return this.email.hasError('required') ? 'You must enter a value' :
        this.email.hasError('email') ? 'Not a valid email' :
            '';
  }

  onSignup(form: NgForm) {
    //console.log(this.form)
    //return
    const email = form.value.email;
    const password = form.value.password;
    this.authService.signupUser(email, password);
      }

   }

auth.service.ts

    import { Router } from '@angular/router';
import * as firebase from 'firebase';
import { Injectable } from '@angular/core';

import { SignupComponent } from './signup/signup.component';

@Injectable()
export class AuthService {
  token: string;

  constructor(private router: Router) {}

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

  signinUser(email: string, password: string) {
    firebase.auth().signInWithEmailAndPassword(email, password)
      .then(
        response => {
          this.router.navigate(['/']);
          firebase.auth().currentUser.getToken()
            .then(
              (token: string) => this.token = token
            )
        }
      )
      .catch(
        error => console.log(error)
      );
  }

  isAuthenticated() {
    return this.token != null;
  }
}

Answer 1

1 - 您没有将表单声明到组件中。

2 - 您通过在 HTML 中使用表单和在组件中使用表单控件来复制表单逻辑。

3 - 如果你想保留你的代码，你应该考虑重命名你的表单控件，比如说emailFormControl，以避免与你的表单混淆。

4 - 一旦你重命名了你的表单控件，你应该改变你的 HTML 来适应你的新模型。

5 - 最好发布实际的错误跟踪以及您的 HTTP 调用（在您的开发工具中），这样我们就可以实际看到问题，而不是猜测。