validating email input in angular – pattern validation

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>

>Solution :

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}$