validate email pattern in angular

Question

I'm trying to prevent user to submit the form if he types invalid email format, my issue is he can type text and submittd the form successfuly even it present error massege but still submit the form, I'm not using formGroup my html code:

<div class="form-group">
   <label for="fromEmail">From Email</label>
   <input type="email"  required name="fromEmail" #fromEmail="ngModel" id="fromEmail" 
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" [(ngModel)]="currentForm.subscribers.subscriber[0].fromEmail" class="form-control" required minlength="1" maxlength="100" />
   <div class="color"  *ngIf="fromEmail.errors.required">Email is required</div>
   <div *ngIf="fromEmail.errors &&(fromEmail.touched || fromEmail.dirty)" class ="alert alert-danger">
      <div [hidden]="!fromEmail.errors?.pattern">
         Invalid pattern
      </div>
   </div>
</div>

thank you for your reply, please explain more or provide me with reference — Asma Alghamdi
– Asma Alghamdi, Commented Nov 3, 2020 at 12:28

saad shafiq · Accepted Answer · 2020-11-03 13:29:43Z

1

In HTML call the method and pass the value entered in it

<input value="{{ emailValidation(value)}}" type="text">
<p *ngIf ="!emailValidation()">ERROR BOX<p>

In .TS file make a custom method and it will validate the email, keep it boolean so it can return true and false based on the email

   emailValidation(value) {
       // logic
     return true;
      }

On submit

   <button  (click)="save()" [disabled]="!emailValidation()">Submit</button>

p.s It is not the best approach, and it is a pseudo-code but you will get the idea.

edited Nov 3, 2020 at 13:29

answered Nov 3, 2020 at 12:44

saad shafiq

1616 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

saad shafiq Over a year ago

can you add the code ? or the problem you are facing. Also, see the code I have edited it

Rodolfo Spier · Accepted Answer · 2020-11-03 23:33:06Z

0

I would normally use a reactive form for this, as it already has a standard e-mail validation. But in your case what I would suggest is:

<div class="form-group">
   <label for="fromEmail">From Email</label>
   <input type="text" required name="fromEmail" ngModel #fromEmail="ngModel" id="fromEmail" 
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" class="form-control" minlength="1" maxlength="100" />
   <div class="color"  *ngIf="fromEmail.errors.required">Email is required</div>
   <div *ngIf="fromEmail.errors &&(fromEmail.touched || fromEmail.dirty)" class ="alert alert-danger">
      <div [hidden]="!fromEmail.errors?.pattern">
         Invalid pattern
      </div>
   </div>
</div>

answered Nov 3, 2020 at 23:33

Rodolfo Spier

18810 bronze badges

Collectives™ on Stack Overflow

validate email pattern in angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related