AngularAuth/Firebase-Firefox中登录屏幕上的电子邮件无效

Question

我正在使用angular和firebase登录我的firebase web应用程序。在使用Firefox时，我简单地得到了一个错误：

身份验证/电子邮件无效/电子邮件地址格式错误。

但是，用户名和密码是正确的，我可以正确路由到已登录的应用程序。

HTML

 <form *ngIf="authService.showLogin" #loginForm="ngForm" action="" (submit)="login()" autocomplete="off" method="POST">
    <h1> Sign In </h1>
    <div class="form-group">
      <div>
        <label> Email Address </label>
        <input type="email" placeholder="[e-mail]" [(ngModel)]="email" name="email"
          required/>
      </div>
    </div>
    <div class="form-group">
      <div>
        <label> Password </label>
        <input type="password" placeholder="Password" [(ngModel)]="password" name="password"
          required/>
      </div>
    </div>
    <div *ngIf="authService.incorrectPassword">
      <span class="error__msg">{{ authService.incorrectPassword }}</span>
    </div>

    <button type="submit" [disabled]="loginForm.invalid" (click)="login()"> Sign In </button>

  </form>



...
constructor(private afAuth: AngularFireAuth) {}
...

login(email: string, password: string): Observable<boolean> {

  this.firebaseAuth.auth.signInWithEmailAndPassword(email, password).then(value => {

    if (this.stateURL != undefined) {
      this.router.navigate([this.stateURL]);
      return Observable.of(true);
    } else {
      this.router.navigate(['folders']);
      return Observable.of(true);
    }
  })
  .catch(err => {
    // console.log(err['code']);
    var errorCode = err.code;
    var errorMessage = err.message;
    console.log(errorCode + ' / ' + errorMessage);
    this.incorrectPassword = ErroAuthEn.convertMessage(err['code']);
    return Observable.of(false);
  });

return;
}

当我将错误记录到UI以通知用户时，这有点烦人，因为我在正确登录之前短暂地看到了错误。

有办法解决这个问题吗？

Answer 1

我要在黑暗中大胆尝试一下，说这很可能是你的问题：

<form *ngIf="authService.showLogin" #loginForm="ngForm" action="" (submit)="login()" autocomplete="off" method="POST"> 

您正在使用Angulars和not两种方式来编写表单。

它应该是什么样子：

<form *ngIf="authService.showLogin" #loginForm="ngForm" (ngSubmit)="login()" autocomplete="off" novalidate">

在这里，我删除了操作和方法，并将提交替换为ngSubmit。看看这是否有助于解决问题。

此外，我发现您正在运行两次登录，请删除以下内容：

（单击提交按钮）=“login（）”。