Html Question posted in
Some basic documentation can be found here.

Html – Email pattern validation in Angular

<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.

Tags:

2

Answers


  1. 0

    This email validation pattern has several issues, try to use this pattern :

    ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search