Displaying Error message under the button Login, when condition is wrong (static username and passwo-CodePudding

I have a problem that has been bothering me. I need to do a small task for work.

So it is a Login page (no registration needed) with a login form (username, password, and a button). The button triggers a doLogin function that checks if the username is admin and the password is admin. If username and password are correct it allows you (redirects) to the home page. If username and password are not correct, then it should display an error message (username or password are not correct) UNDER the sign in button.

I tried many things already with validators, FormBuilder, and stuff. I can console.log the message if the condition is wrong I just don't know how to display it under the button on a login page.

This is my Login Component

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '../_services/auth.service';
import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {

  username!: string;
  password!: string;
  formData!: FormGroup;

  constructor(private authService: AuthService, private router: Router) { }



  ngOnInit() {
    this.formData = new FormGroup({
      username: new FormControl("admin", [Validators.required]),
      password: new FormControl("admin", [Validators.required])
    });
  }


  doLogin(data: any) {
    this.username = data.username;
    this.password = data.password;

    console.log("Login page: "   this.username);
    console.log("Login page: "   this.password);

    this.authService.login(this.username, this.password)
      .subscribe(data => {
        console.log("Is Login Success: "   data);

        if (data) this.router.navigate(['/home'])
      });
  }
}

<!-- Page Content -->
<div id="wrapper">

    <body>
        <div >

            <img id="profile-img" src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"  />
            <div >
                <div  style="padding-top: 20px;">
                    <div  style="margin-top: 10px; padding-left: 0px; padding-right: 0px;">
                        <div >
                            <div  style="text-align: center;">
                                <form [formGroup]="formData" (ngSubmit)="doLogin(formData.value)" >
                                    <h2 >Prijava</h2>
                                    <label for="inputEmail" >Username</label>
                                    <input  type="text" id="username" 
                                        formControlName="username" placeholder="Username" required autofocus />
                                    <label for="inputPassword" >Password</label>
                                    <input type="password" id="inputPassword" 
                                        formControlName="password" placeholder="Password" required>
                                        <div *ngIf="false">
                                            Password must be at least 6 characters
                                          </div>
                                    <button  type="submit">Login</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</div>

And this is my Login page and form when app runs:

Under this blue Login button the error message should appear if pass and username is not admin, admin

Can anyone help me please?

Cheers and thank you.

CodePudding user response：

Use AbstractControl.setErrors() to set custom error:

Sets errors on a form control when running validations manually, rather than automatically.

this.formData.setErrors({ unauthenticated: true });

Next, in HTML display error message when unauthenticated is true with:

<div *ngIf="formData.errors?.unauthenticated">
 Username or Password incorrect!
</div>

login.component.ts

doLogin(data: any) {
  ...

  this.authService.login(this.username, this.password).subscribe((data) => {
    console.log('Is Login Success: '   data);

    if (data) this.router.navigate(['/home']);
    else this.formData.setErrors({ unauthenticated: true });
  });
}

<form
 [formGroup]="formData"
 (ngSubmit)="doLogin(formData.value)"
 
 >
 ...

 <button
   
   type="submit"
 >
 Login
 </button>
 <div *ngIf="formData.errors?.unauthenticated">
   Username or Password incorrect!
 </div>
</form>

Sample Demo on StackBlitz

CodePudding user response：

There are a few ways to do this.

First option

You can create an HTML element as follows under your login button.

<mat-error *ngIf="showError">username or password are not correct</mat-error>

Then in your component file, create a variable (under formData!: FormGroup;)

  showError: boolean = false;

Then inside your subscribe, after console.log()

this.showError =true;

Second option

If you want don't want to hard type the message to your template, you can do as follows.

In your component template HTML file.

<mat-error *ngIf="showError">{{message}}</mat-error>

Then in your component file, create these variables (under formData!: FormGroup;)

showError: boolean = false;
message:string;

Then inside your subscribe, after console.log()

    if (data) {
      this.router.navigate(['/home'])
    } else {
      this.showError = true;
      // this.message = data;
      Or
      this.message = "username or password are not correct";
    }