角度表单验证以显示登录错误消息

Question

因此，我想尝试在每当用户输入错误的登录页面上显示“无效的用户名或密码”错误消息。

我的auth.service.ts代码是：

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

    );
}

它在我的signupcomponent.ts文件中实现，例如：

import { NgForm } from '@angular/forms';
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.css']
})
export class SigninComponent implements OnInit {


  constructor(private authService: AuthService,) { }

  ngOnInit() {
  }

  onSignIn(form: NgForm) {
    const email = form.value.email;
    const password = form.value.password;
    this.authService.signinUser(email, password);

  }

}

而且signup.component.html是

<div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <h1 class="display-3" style="text-align: center"> Login  </h1>
    <form  (ngSubmit)="onSignIn(f)" #f ="ngForm"  >
      <div class="form-group" style="margin-top: 20px">
        <label for="email"> Email </label> <!--for firebase you auth with email and password -->
        <input type="email" name = "email" class="form-control" id="EmailId" ngModel required>
      </div>
      <div class="form-group"  style="margin-top: 20px">
        <label for="password"> Password </label> <!--for firebase you auth with email and password -->
        <input type="password" name = "password" class="form-control" id="Password" ngModel required>
        <button style="margin-top: 20px" class="btn btn-primary" type="submit" [disabled]="!f.valid"> Sign In </button>
      </div>
    </form>
    </div>
  </div>

因此，理想情况下，我想在提交按钮后放置* ngIf指令，以捕获auth .service中signIn函数所产生的错误。

到目前为止，我只是将其记录在控制台中，然后在其中看到错误：消息属性为“ auth / invalid-email”：“电子邮件地址格式错误”。 输入错误的电子邮件时（以及类似的密码）。 有什么方法可以显示singin组件html的ngIf div元素中auth.service中捕获的错误中的这些（或更确切的说是“无效的用户名或密码”自定义消息）消息？

Answer 1

是的，您可以，您有两种方法可以做到。

首先，你应该做的then你的组件象下面这样：

您的服务：

signinUser(email: string, password: string) {
   return firebase.auth().signInWithEmailAndPassword(email, password)      
}

您的竞争对手：

onSignIn(form: NgForm) {
    const email = form.value.email;
    const password = form.value.password;
    this.authService.signinUser(email, password)
     .then(response => {
        this.router.navigate(['/recipes']);
        firebase.auth().currentUser.getIdToken()
         .then(
            (token: string) => this.token = token
        );
     })
     .catch (
         error => this.errorMessage = error.message;
    );
}

第二种方法：在服务上创建Rxjs主题：

您的服务：

import {Subject} from 'rxjs/Subject';

     private logInErrorSubject = new Subject<string>();

     public getLoginErrors():Subject<string>{
            return this.logInErrorSubject;
     }

     signinUser(email: string, password: string) {
         firebase.auth().signInWithEmailAndPassword(email, password).then(
         response => {
           this.router.navigate(['/recipes']);
           firebase.auth().currentUser.getIdToken()
           .then(
              (token: string) => this.token = token
           );
          }
      )
     .catch (
         error => this.logInErrorSubject.next(error.message);

     );
      }

您的组件：

     private errorMessage:string;

     constructor(private signupService:SignupService){
        this.signupService.getLoginErrors().subscribe(error => {
               this.errorMessage = error;
          });
     }