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

Question

我最近在一个项目中工作，该项目使用带有 material 组件的 Angular2，并开发一个附加到 Firebase 的 sigun 和登录表单。事情是，无论何时单击登录按钮，它都应该给出错误 "ERROR M {code: "auth/argument-error"，消息："createUserWithEmailAndPassword failed: First argument "email" 必须是有效字符串。"

<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>

signupcomponent.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 - post 实际的错误跟踪以及您的 HTTP 调用（在您的开发工具中）会很好，这样我们才能真正看到问题，而不是猜测。

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

First argument "email" must be a valid string."

angular

angular2-template

angular2-forms

angular2-services