用于显示登录错误消息的角度表单验证

Question

所以我想尝试在登录页面上显示“无效用户名或密码”的错误信息，每当用户得到他们是错误的。

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)

    );
}

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

  }

}

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

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

Answer 1

是的。你可以，你有两种方法做这件事。

首先，您应该在组件上执行然后，如下所示：

您的服务：

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;
    );
}

您的服务：

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;
          });
     }