TYPESCRIPT

email validation pattern angular

 pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$"

angular 10 email id validation

<div class="form-group">
      <label for="email">Email: </label>
      <input type="email"  class="form-control" placeholder="Enter email" name="email" ngModel [email]="employee.emailId"  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$" required #email ="ngModel"

      [class.is-invalid]= "email.invalid && email.touched " >

      <div *ngIf="email.errors && (email.dirty && email.touched)" class="alert-email alert-danger-email"><br>

              <div [hidden]="!email.errors['pattern']">
                Please input a valid email.
              </div>
              <div [hidden]="!email.errors['required']">
                Email is required
              </div>

            </div>

    </div>

email pattern in html input angular

<input name="officialEmail" [ngModel]="user.officialEmail" required [pattern]="emailPattern" #offEmail="ngModel"> 

angular email validation

<input type="email" name="email" ngModel email>
<input type="email" name="email" ngModel email="true">
<input type="email" name="email" ngModel [email]="true">
    

email validator angular

content_copy
<input type="email" name="email" ngModel email>
<input type="email" name="email" ngModel email="true">
<input type="email" name="email" ngModel [email]="true">

angular validator email

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

...
form!: FormGroup;

ngOnInit(): void {
    this.form = new FormGroup({
      email: new FormControl(null, {validators: [Validators.required, Validators.email]}),
    });
  }
...