Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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("[email protected]", 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!!

Share the post

Angular 5/4 Email Validation Regex - Model Driven Form

×

Subscribe to Angular 2 Javascript Asp.net C# Sql Server Knockoutjs Angularjs Kendo Ui Html 5 Web Api Wpf Wcf Etc.

Get updates delivered right to your inbox!

Thank you for your subscription

×