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 email validator in formGroup

How To Validate Email in Angular 4 and TypeScript using formGroup or Custom RegExp?

Angular 4 has a built-in email validation tag that can be added within the input fields and only will need to set the email validation error (with a custom message), if not a valid email address.
We can also use the custom regular expression like [Validators.pattern("[^ @]*@[^ @]*")] to validate an email or other stuff also.

Email_RegExp = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

Syntax – Built-in Email Validation Tags

<input type="email" ng-model="string"
  [name="string"]
  [required="string"]
  [ng-required="string"]
  [ng-minlength="number"]
  [ng-maxlength="number"]
  [pattern="string"]
  [ng-pattern="string"]
  [ng-change="string"]>


Angular Module -
//NgModule
@NgModule({
  imports: [BrowserModule, ReactiveFormsModule],
  declarations: [App],
  bootstrap: [App]
})
export class AppModule {}


Email HTML Template -
//Email template
<form  [formGroup]="myForm" (ngSubmit)="onSubmit(f.value)"> 
  <label>Email </label>
  <input formControlName="email" ><br/>
  <span  *ngIf="myForm.hasError('email', 'email')" style="color:red;">
      Please enter the correct email or valid email.
  </span>
</form>


Use Of FormGroup and FormControl -
//Using FormGroup and FormControl
export class App {
  fGroup: FormGroup;
  emailCtrl: FormControl;
 
  constructor(private fBuilder: FormBuilder) {
      this.fGroup = fBuilder.group({
          UserFName:  ['', Validators.required],
          UserLastName: ['', Validators.required],
          AboutUser: ['', Validators.required],
          email: ['', Validators.email]
      });
  }
}


Example in Detail –
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `<form  [formGroup]="fGroup" (ngSubmit)="onSubmit(f.value)"> 
    <label>Email </label>
    <input formControlName="email" ><br/>
    <span  *ngIf="fGroup.hasError('email', 'email')" style="color:red;">
      Please enter the correct email or valid email.
    </span>
  </form>`,
})
export class App {
  fGroup: FormGroup;
  emailCtrl: FormControl;
 
  constructor(private fBuilder: FormBuilder) {
      this.fGroup = fBuilder.group({
          UserFName:  ['', Validators.required],
          UserLastName: ['', Validators.required],
          AboutUser: ['', Validators.required],
          email: ['', Validators.email]
      });
  }
}

@NgModule({
  imports: [ BrowserModule, ReactiveFormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}


Result looks like –

Example 2

Model Driven Form Validation -
class FormComponent implements OnInit {
  fGroup: FormGroup;
    ngOnInit() {
      fGroup = new FormGroup({
          User_Name: new FormGroup({
              First_Name: new FormControl('', Validators.required),
              Last_Name: new FormControl('', Validators.required),
          }),
          Email: new FormControl('', [Validators.required,Validators.pattern("[^ @]*@[^ @]*")]),
          Password: new FormControl('', [Validators.minLength(6), Validators.required])
      });
    }
}


Result looks like - http://embed.plnkr.co/QbMNBDrffGKHbHjG6GMa/

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

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 - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions