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

因此，我想尝试在登录页面上显示“无效用户名或密码”错误消息，只要用户出错

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

登录
电子邮件
密码
登录

因此，理想情况下，我希望在submit按钮后面放一个*ngIf指令，它将捕获auth.service中的sign函数所犯的错误

---

到目前为止，我只是在控制台中记录它，在那里我看到错误：“auth/invalid email”和message属性：“电子邮件地址格式不正确”。当输入错误的电子邮件时（密码也是如此）。有没有办法在我的singin组件的html中的ngIf div元素中显示我的auth.service中捕获的错误中的这些（或者更确切地说是自定义消息“无效用户名或密码”）消息

是的，你可以，你有两种方法

首先，您应该在组件上执行

，然后执行
，如下所示：

您的服务：

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主题：

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

您的服务：

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

     );
      }

是的，你可以，你有两种方法

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

您的服务：

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主题：

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

您的服务：

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

     );
      }

搜索formGroup在您的案例中会很有帮助搜索formGroup在您的案例中会很有帮助很抱歉，我刚刚再次检查，如果我在组件中而不是服务中放置了。then，我似乎无法登录。有没有办法在服务中声明catch错误（在catch块中），然后在signIn组件的html中显示它？检查我提供的第二种方法。是的，第二种方法有效。再次非常感谢你！！这是一个很大的帮助很高兴为您提供帮助：）有人能告诉我为什么现在没有UPVOLUES和0吗？解决方案2非常适合我。这不是一个很好的方法吗？很抱歉，我只是再次检查，如果我将.then放入组件而不是服务中，我似乎无法登录。有没有办法在服务中声明catch错误（在catch块中），然后在signIn组件的html中显示它？检查我提供的第二种方法。是的，第二种方法有效。再次非常感谢你！！这是一个很大的帮助很高兴为您提供帮助：）有人能告诉我为什么现在没有UPVOLUES和0吗？解决方案2非常适合我。这不是一个好方法吗？