javascript - Angular form validation to show login error messages - Stack Overflow

admin管理员组

文章数量:1396114

so I want to try to show the 'Invalid username or password' error message whenever on the login page whenever the user get's them wrong.

My auth.service.ts code is :

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)

    );
}

And it's implemented in my signupponent.ts file like :

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

@Component({
  selector: 'app-signin',
  templateUrl: './signinponent.html',
  styleUrls: ['./signinponent.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);

  }

}

And the signupponent.html is

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

So ideally, I would like to put a *ngIf directive after the submit button that will catch the errors made by the signIn function in the auth .service.

As of now, I'm just logging it in the console, and there I see the error : "auth/invalid-email" with the message property: "The email address is badly formatted." when an incorrect email is entered (and similarly for the password) . Is there any way to display these (or rather the custom message 'Invalid username or password') messages from the caught errors in my auth.service in an ngIf div element in my singin ponent's html ?

so I want to try to show the 'Invalid username or password' error message whenever on the login page whenever the user get's them wrong.

My auth.service.ts code is :

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)

    );
}

And it's implemented in my signupponent.ts file like :

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

@Component({
  selector: 'app-signin',
  templateUrl: './signin.ponent.html',
  styleUrls: ['./signin.ponent.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);

  }

}

And the signup.ponent.html is

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

So ideally, I would like to put a *ngIf directive after the submit button that will catch the errors made by the signIn function in the auth .service.

As of now, I'm just logging it in the console, and there I see the error : "auth/invalid-email" with the message property: "The email address is badly formatted." when an incorrect email is entered (and similarly for the password) . Is there any way to display these (or rather the custom message 'Invalid username or password') messages from the caught errors in my auth.service in an ngIf div element in my singin ponent's html ?

• javascript
• angular
• firebase
• firebase-authentication

Share Improve this question Follow edited Feb 12, 2018 at 14:42 Frank van Puffelen 601k8585 gold badges890890 silver badges860860 bronze badges asked Feb 12, 2018 at 12:45 Saloni MudeSaloni Mude 3911 gold badge11 silver badge99 bronze badges 1

• search for formGroup it will be helpful in your case – Khaled Ahmed Commented Feb 12, 2018 at 12:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Yes you can, you have two ways to do it.

First one, you should do the then on your ponent like below:

Your service:

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

Your ponet:

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

Second way: create Rxjs Subject on your service:

Your Service:

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

     );
      }

Your ponent:

     private errorMessage:string;

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

本文标签： javascriptAngular form validation to show login error messagesStack Overflow