Angular2 email validation

Question

I am new in learning Angular2, and I want to make a validation form that verifies emails after a RegEx pattern.

My code looks something like this but I don't have any idea if I am doing it right, or what I did wrong, can somebody please help me a bit?

Thank you!

I fixed it. Thank you a lot everybody.

<div class="alert-email">      <label for="contactemail">EMAIL: </label>      <input type="email" id="contactemail" name="contactemail"             required ng-pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"             [(ngModel)]="model.contactemail" #contactemail="ngModel"             placeholder="Your email" /><br><br>      <div *ngIf="contactemail.errors && (contactemail.dirty || contactemail.touched)" class="alert-email alert-danger-email"><br>        <div [hidden]="!contactname.errors.required">          Email is required        </div>        <div [hidden]="!contactname.errors">          Please input a valid email.        </div>      </div>    </div>

Answer 1

Try Something like that

<div class="alert-email">         <label>Email</label>             <input                 id="contactemail"                 type="text"                                 #contactemail="ngModel"                 [(ngModel)]="model.contactemail"                 required                 pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">          <div class="md-errors-spacer" [hidden]="contactemail.valid || contactemail.untouched">             <div  *ngIf="contactemail.errors && contactemail.errors.required">                 Email is required             </div>             <div  *ngIf="contactemail.errors && contactemail.errors.pattern">                 Email is invalid             </div>         </div>     </div> 

Answer 2

Angular 4 has a built-in "email" validation tag that can be added within the input. E.g.:

<input type="email" id="contactemail" email> 

This will be valid for a series of numbers and letters then an @ then another series of letters. It will not account for the dot after the @ -- for that you can use the "pattern" tag within the input and your standard regex.