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”，其中包含message属性：“电子邮件地址格式错误。”输入错误的电子邮件时（类似于密码）。有没有办法在我的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;
          });
     }

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

1 个答案: