validating email input in angular - pattern validation-CodePudding

I am using template driven pattern to check if input is valid email and uses mat error to display it but it somehow does not work and I dont really understand why , as you can see in my code below I dont think there is still other way to do it , any idea why it does works guys ? Thanks.

whatever input it is always red even the email format is correct , why is that ?

#Email

<mat-form-field appearance="fill" fxFlex="30">
    <mat-label>EMAIL ADDRESS</mat-label>
    <input matInput type="email" pattern="^[a-zA-Z0-9._% -] @[a-zA-Z0-9.-] \.[a-zA-Z]{2,4}$" [(ngModel)]="model.email"
        maxLength="100" #email="ngModel" required [readonly]="odel.assetStatus === 'Done'">
    <mat-error *ngIf="!model.email ">Inspector
        email is required.</mat-error>
    <mat-error *ngIf="email.errors?.maxLength">Max
        length is 100.</mat-error>
    <mat-error *ngIf="(email.errors && (email.invalid || email.touched))">InvalidEmail.</mat-error>
</mat-form-field>

CodePudding user response：

Why don't you use the EmailValidator from angular ?

<input matInput type="email" email [(ngModel)]="model.email"

If you really want a custom regex, maybe this will help

/^\w ([\.-]?\w )*@\w ([\.-]?\w )*(\.\w{2,3}) $/

Now what's wrong with your regex:

^[a-zA-Z0-9._% -] @[a-zA-Z0-9.-] \.[a-zA-Z]{2,4}$

You made it so you can have only one letter, than a space, than @, than another letter, than a space, than a dot and 2 or 3 letters. So only something like this will pass: t @t .com

The issue is with the spaces (after @ and before .), you should put a instead and everything would work:

^[a-zA-Z0-9._% -] @[a-zA-Z0-9.-] \.[a-zA-Z]{2,4}$

CodePudding user response：

I got from this article https://www.abstractapi.com/guides/angular-email-validation , if you want to use the regex for validator email on the template-driven form you can try this pattern ^[a-z0-9._% -] @[a-z0-9.-] \\.[a-z]{2,4}$