0
223
Viewsvalidating 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 ?
<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>
2 answers
Answer question0
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}$
0
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}$