0

I have a form in Angular JS 1.5.11.

I have it set up to show an error message for empty required fields on form submit. I need to add the ability to also detect if an email is valid on submit.

So far, I can’t get this to work. I tried using the “built-in” email field validation, the tried an ng-pattern. Still, no matter what you type in the field, it shows no error. Only the empty field show an error.

 

<div class="row">
 <div class="col-md-12">
   <div class="form-group" ng-class="{ 'has-error' : abc.myForm.$submitted && abc.myForm.email.$error.required && abc.myForm.email.$error.pattern  }">
  <label>Email</label>
  <input type="email" name="email" class="form-control" ng-model="abc.user.email" ng-pattern="emailFormat" required>
  <p class="help-block error-block">Enter a valid email address.</p>
  </div>
 </div>
</div>

 

See the whole form at https://plnkr.co/edit/3lAMOM3agSMGC9AAr2IT?p=preview