Email pattern validation in Angular

Question

<label for="userEmail">User Email:</label><br />
          <input type="email" class="userMobile" id="userEmail" name="userEmail"
            [(ngModel)]="selectedLocker.lockeruseremail" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.(com|in)$"/><br />

The pattern requires the email to be in the format [email protected] or [email protected], but it still allows submission without .com or .in.

Answer 1

For the template-driven form, you should use form.valid to check the form is valid before submission. And apply the [disabled] attribute to block the button submission.

import { ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@ViewChild('form') form!: NgForm;

submit() {
  if (!this.form.valid) {
    alert('Form value invalid Detected!')
    return;
  }

  ...
}

You can display the error for the control with the ngModel directive as below:

<form #form="ngForm" (submit)="submit()">
  <label for="userEmail">User Email:</label><br />
  <input
    type="email"
    class="userMobile"
    id="userEmail"
    name="userEmail"
    [(ngModel)]="selectedLocker.lockeruseremail"
    required
    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.(com|in)$"
    #email="ngModel"
  /><br />
  <ng-container *ngIf="email.errors?.pattern">
    Invalid email pattern.
  </ng-container>

  <button [disabled]="!form.form.valid">Submit</button>
</form>

Demo @ StackBlitz