python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
Angular 4

Angular 5/4 Email Validation Regex - Model Driven Form

In this Article, we will see “How Angular 5/4 forms are used or create?”  There are basically two types of Angular forms (login) and its validations.
ü  Template driven form
ü  Model driven forms
And In this section, I will discuss about Model driven form.

Steps 1 - In the NgModule
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

Steps 2 - Create login form
<form [formGroup]="logedInForm" (ngSubmit) = "mdfLogin(logedInForm.value)" >
 //login UI

Steps 3 - Initialize FormGroup and FormControl in ngOnInit method
  ngOnInit() { = new Date(); // Today date and time
    this.logedInForm = new FormGroup({
      emailId: new FormControl("[email protected]", Validators.compose([
          Validators.pattern("[^ @]*@[^ @]*")
      password: new FormControl('Password!123', [

Steps 4 – Create login method to preform login actions
  // Model Driven Form - login
  mdfLogin(data) {
    this.emailId = data.emailId;
    this.password = data.password;

<form [formGroup]="logedInForm" (ngSubmit) = "mdfLogin(logedInForm.value)" >
            <input type="text" class="textbox" name="emailId" placeholder="Email" formControlName="emailId">
            <input type="password" class="textbox" name="password" placeholder="password" formControlName="password">
            <input type="submit" class="button default-button" value="LogIn" [disabled] = "!logedInForm.valid">

The Result looks like –

The Video URLs –
I hope you are enjoying with this post! Please share with you friends. Thank you!!

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like Powered by Blogger.
ASK Questions