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

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^