How to give mail validation examples in angular 6

In Angular 6, you can use the ng-pattern directive to validate email addresses. Here are a few examples:

Example 1: Basic Email Validation

<input type="email" ng-model="email" ng-pattern="/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/">

This regular expression matches most common email address formats.

Example 2: More Advanced Email Validation

<input type="email" ng-model="email" ng-pattern="/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$|^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}\.[a-zA-Z]{2,}$/">

This regular expression matches more advanced email address formats, including those with multiple top-level domains (e.g., .com.uk).

Example 3: Using a Custom Validation Function

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-example',
  template: `
    <form [formGroup]="form">
      <input type="email" formControlName="email" required>
      <div *ngIf="form.get('email').invalid && (form.get('email').dirty || form.get('email').touched)">
        Invalid email address
      </div>
    </form>
  `
})
export class ExampleComponent {
  form = new FormGroup({
    email: new FormControl('', Validators.email)
  });
}

In this example, we're using the Validators.email validator to validate the email address. This validator uses a regular expression to match most common email address formats.

Example 4: Using a Custom Validation Directive

import { Directive, ElementRef } from '@angular/core';
import { NG_VALIDATORS } from '@angular/forms';
import { ValidatorFn } from '@angular/forms';

@Directive({
  selector: '[appEmailValidator]'
})
export class EmailValidatorDirective implements ValidatorFn {
  constructor(private el: ElementRef) { }

  validate(control: FormControl): { [key: string]: any } {
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (!emailRegex.test(control.value)) {
      return { invalidEmail: true };
    }
    return null;
  }
}

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-example',
  template: `
    <form [formGroup]="form">
      <input type="email" formControlName="email" appEmailValidator required>
      <div *ngIf="form.get('email').invalid && (form.get('email').dirty || form.get('email').touched)">
        Invalid email address
      </div>
    </form>
  `
})
export class ExampleComponent {
  form = new FormGroup({
    email: new FormControl('', Validators.email)
  });
}

In this example, we're creating a custom validation directive EmailValidatorDirective that uses a regular expression to validate the email address. We're then applying this directive to the input field using the appEmailValidator attribute.

These are just a few examples of how you can validate email addresses in Angular 6. You can customize the regular expressions or validation functions to fit your specific needs.