0

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 ?

enter image description here

#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>
Improve this question

2 Answers 2

Reset to default
2

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}$
Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Hi Sir , first I am not using reactive form and will not use reactive form cause that would mean I have to update all of my code. My issue is even with the correct regex it always displays the "Email is invalid " error , even if you repalce with correct email format it is still red
You don't need ReactiveForms for it to work. You have an example at the bottom of the documentation that uses ngModel
do you have stackblitz sample that it would work based on my example code above Sir ?
you can put the pattern instead of email validator. That is how angular considers valid emails. I've changed the stackbltitz again please check
@DiyaAgastya, you should learn how to do basic forms before trying to do one. There's loads of videos on Youtube about it. You keep asking question for each input you're struggling on and this is not the right way to do. You can't just create a form without knowing what ngModel is, or using ReactiveForm.
|
1

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

Improve this answer

4 Comments

Still the same , the field still always displays red even I already input the correct email, once the valid email error shows it become permanent even I replace or erase it
imgur.com/a/ATDPqMD
Do you have a sample project on stackblitz?
stackblitz.com/edit/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.