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.