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

ü  Stayed Informed – Angular 5 and Angular 4 documentation and example

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
</form>

Steps 3 - Initialize FormGroup and FormControl in ngOnInit method

  ngOnInit() {

    this.date = new Date(); // Today date and time

    this.logedInForm = new FormGroup({

      emailId: new FormControl("anil.singh581@gmail.com", Validators.compose([

          Validators.required,

          Validators.pattern("[^ @]*@[^ @]*")

     ])),

      password: new FormControl('Password!123', [

           Validators.minLength(8),

           Validators.required])

    })

  }

Steps 4 – Create login method to preform login actions

  // Model Driven Form - login

  mdfLogin(data) {

    this.emailId = data.emailId;

    this.password = data.password;

    alert(JSON.stringify(data));

  }

And

<form [formGroup]="logedInForm" (ngSubmit) = "mdfLogin(logedInForm.value)" >

        <div>

            <input type="text" class="textbox" name="emailId" placeholder="Email" formControlName="emailId">

        </div>      

        <div>

            <input type="password" class="textbox" name="password" placeholder="password" formControlName="password">

        </div>

        <div>

            <input type="submit" class="button default-button" value="LogIn" [disabled] = "!logedInForm.valid">

        </div>

    </form>

The Result looks like –

The Video URLs –

I hope you are enjoying with this post! Please share with you friends. Thank you!!