Login Form With Validation In Angular.

In This article, I will explain how to create a Login form with validation in Angular.

Step 1: Create a New Angular application.

ng new demo

Step 2: Create Component.

ng g c home

Step 3: Add the following code in app.component.html

<div class="container containerdiv">
  <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
    <div class="formdiv">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2>Login</h2>
        </div>
        <div class="col-lg-12 set-margin">
          <input type="text" id="userName" class="form-control" formControlName="userName" placeholder="Enter UserName">
          <span class="text-danger" *ngIf="(loginData.userName.touched || submitted) && loginData.userName.errors?.required">
             UserName is required     
          </span>
          <span class="text-danger" *ngIf="loginData.userName.touched && loginData.userName.errors?.email">
             Enter a valid email address
          </span>
        </div>
        <div class="col-lg-12 set-margin">
          <input type="password" id="passWord" class="form-control" formControlName="passWord" placeholder="Enter Password">
            <span class="text-danger" *ngIf="(loginData.passWord.touched || submitted) && loginData.passWord.errors?.required">
              Password is required
            </span>
            <span class="text-danger" *ngIf="(submitted && loginData.passWord.hasError('required')) || loginData.passWord.touched && loginData.passWord.errors?.invalidPassword">
              Password should have minimum 8 characters, at least 1 uppercase letter, 1 lowercase
              letter and 1 number
            </span>
        </div>
        <div class="col-lg-12 set-margin-submit">
          <button type="submit" class="form-control">Login</button>
        </div>
      </div>
    </div>
  </form>
</div> 
<router-outlet></router-outlet>

Step 4: Add the following CSS in app.component.css

.containerdiv{
    padding-left: 200px;
    padding-right: 200px;
}

.formdiv{
    margin-top:25%;
    background-color: lightgray;
    border-radius: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 173px;
    padding-right: 212px;
    box-shadow: 10px 10px 8px black;
}

.set-margin{
    margin-top:10px;
}

.set-margin-submit{
    margin-top:30px;
}

Step 5: Write the following code in app.component.ts.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  
  loginForm!:FormGroup;
  submitted = false;

  constructor(private fb:FormBuilder,private router:Router){}

  ngOnInit(): void 
  {
    this.loginForm = this.fb.group({
      userName:['',[Validators.required,Validators.email]],
      passWord:['',[Validators.required,Validators.pattern(
        '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,12}$'
      )]]
    });
  }

  get loginData(){
    return this.loginForm.controls;
  }

  onSubmit()
  {
       this.submitted = true;
       if(this.loginForm.valid)
       {
          localStorage.setItem("userName",this.loginForm.get('userName')?.value);
          localStorage.setItem("passWord",this.loginForm.get('passWord')?.value);  
          this.clear();
          this.loginForm.disable();
          this.router.navigate(['registration']);
       }
  }

  clear()
  {
    this.loginForm.patchValue({
      userName:'',
      passWord:''
    });
  }
}

Step 6: Run the Application and see the Output

npm start