Reactive Forms Email And Password Pattern Validations In Angular

To create a Reactive from,you need to import the ReactiveFormsModule from @angular/froms in app.module.ts page.

Step 1

To create a Reactive from, you need to import the ReactiveFormsModule from @angular/froms in app.module.ts page.

import { BrowserModule } from'@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from'@angular/forms';
@NgModule({
   BrowserModule,
   BrowserModule,
   ReactiveFormsModule,
}),
exportclassAppModule { }

Step 2

Next create user module page for login form. Create component and design pages, look for component.ts and component.html pages within our app folder.

import { Component, OnInit,TemplateRef,ViewChild, ElementRef } from'@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl, AbstractControl } from'@angular/forms';

Here I have added some Angular libraries.

Step 3

Add form selector id and template url path. We can access it from control design component.html page.

Form just contains email and password validations in Angular. We can access the pattern for email and password for the below pattern. Password just contains one alphabet letter, one number, and one special character.

@Component({
   selector:'module-id',
   templateUrl:'./login.component.html',
})
exportclassLoginComponentimplementsOnInit {
   loginForm: FormGroup;
   constructor(privatehttp: Http,privatefrombuilders: FormBuilder){
}
ngOnInit() {
this.Form = this.frombuilders.group({
   Email: ['', [Validators.required, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')]],
   Password: ['', [Validators.required, Validators.pattern('(?=.*[A-Za-z])(?=.*[0-9])(?=.*[$@$!#^~%*?&,.<>"\'\\;:\{\\\}\\\[\\\]\\\|\\\+\\\-\\\=\\\_\\\)\\\(\\\)\\\`\\\/\\\\\\]])[A-Za-z0-9\d$@].{7,}')]],
});
}

Content was composed with the instant online HTML editor. Please purchase an HTMLg license to remove the promotional messages from the edited documents.