In this article, I’ll explain step by step process of login form with validation using angular material.
Step 1: Let’s create an angular application
ng new material-login
Step 2: Create an Angular component
ng g c login ng g c home
Step 3: Install the Following command in your angular application
npm install --save @angular/material @angular/cdk
Step 4: Add the following command in login.component.html
Open the login.component.html file and add the below code.
<div class="text-center"> <h4 class="text-center"> Login form with Validation using Angular Material</h4> <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" novalidate class="d-flex-center"> <div class="example-container"> <div> <mat-form-field> <input matInput placeholder="Email" formControlName="email"> <mat-error *ngIf="!loginForm.get('email')?.errors?.required && (loginForm.get('email')?.errors?.pattern)"> Please enter a valid email address </mat-error> <mat-error *ngIf="loginForm.get('email')?.invalid && (loginForm.get('email')?.dirty || loginForm.get('email')?.touched) && loginForm.get('email')?.errors?.required"> Email is required </mat-error> </mat-form-field> </div> <div class="mt-top-2"> <mat-form-field> <input matInput type="password" placeholder="Password" formControlName="password"> <mat-error *ngIf="!loginForm.get('password')?.errors?.required"> Password length must be greater than or equal to 8 and password must contain one or more uppercase , lowercase , numeric and special characters </mat-error> <mat-error *ngIf="loginForm.get('password')?.invalid && (loginForm.get('password')?.dirty || loginForm.get('password')?.touched) && loginForm.get('password')?.errors?.required"> Password is required </mat-error> </mat-form-field> </div> <div class="mt-top"> <button [disabled]="!loginForm.valid" mat-raised-button color="primary" mat-button>Sign In</button> </div> </div> </form> </div>
Step 5: Add the following command in login.component.ts
Open the login.component.ts file and add the below code.
import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup, Validators } from '@angular/forms'; import { Route, Router } from '@angular/router'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.scss'] }) export class LoginComponent implements OnInit { loginForm: FormGroup | any; title = 'material-login'; constructor( private router:Router ) { this.loginForm = new FormGroup({ email: new FormControl('', [Validators.required, Validators.email,Validators.pattern( '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$', ),]), password: new FormControl('', [Validators.required,Validators.pattern( '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,12}$' )]) }); } ngOnInit(): void { } onSubmit(){ if(!this.loginForm.valid){ return; } localStorage.setItem('user',this.loginForm.value) this.router.navigate(['/home']) } }
Step 6: Add the following command in login.component.scss
.text-center{ text-align: center; } .example-container{ height: 50%; width: 20%; text-align: left; } .d-flex-center{ display: flex; align-items: center; justify-content: center; } .mat-form-field{ width: 100%; } .mt-top{ margin-top: 30px; } .mt-top-2{ margin-top: 10px; }
Step 7: Add the following command in app.module.ts
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { MatButtonModule } from '@angular/material/button'; import { MatInputModule } from '@angular/material/input'; import { HomeComponent } from './home/home.component'; import { LoginComponent } from './login/login.component'; @NgModule({ declarations: [ AppComponent, HomeComponent, LoginComponent ], imports: [ BrowserModule, FormsModule, ReactiveFormsModule, BrowserAnimationsModule, MatButtonModule, MatInputModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Step 8: Add the following command in app-routing.module.ts
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { LoginComponent } from './login/login.component'; const routes: Routes = [ { path:'home', component:HomeComponent }, { path:'', component:LoginComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
Step 9: Add the following command in app.component.html
<router-outlet></router-outlet>
Step 10: Run The App
ng serve
it is good website
excellent tutorial my friend.
No Garbage..
Exactly what this Tutorial Heading says..
I implement this layout on my Angular Material App inside a minute… and its working like a charm..
I looking forward for the next parts of this tutorial.
Like
Show the LoggedIn user with avatar in the toolbar
also if possible the signup form and after after signup finished – SignedUp user name with avatar show in tool bar
Great work and good luck