Does HTML5 email validation and angular2 work together?

Question

I'm currently working on validations with angular2. I have some problems with HTML5 email and website validators and valid ngModel's property.

For example:

<form #form="ngForm">
    <input type="email" #email="ngModel" [(ngModel)]="contact.email" name="email" >
    <button [disabled]="!form.form.valid" type="submit">Btn</button>

Every word i input is fine. #email.valid remains true as if no HTML5 validator existed:

{{#email.valid}} %%% true

So the form's button is enabled all the time. But when i hit the button the HTML warning comes out saying that the email field is invalid, so validation is working, but #email.valid it's still true.

Is it possible to use angular2's ngModel directive with HTML5 validators?

Answer 1

yes you can use both together, you can use them like this

<input  id="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" class="form-control" type="email" ng-model="loginctrl.user.email" name="email" placeholder="Enter Email Address" required/>
<span ng-show="myForm.email.$touched && myForm.email.$error.required"><b class="color">This is a required field</b></span> <span ng-show=" myForm.$dirty && myForm.email.$invalid"><b class="color">This field is invalid</b></span>