title: AngularJS show email field error on submit?
body: <p>I have a form in Angular JS 1.5.11.</p>
  <p>I have it set up to show an error message for empty required fields on form submit.  I need to add the ability to <em>also</em> detect if an email is valid on submit.</p>
  <p>So far, I can't get this to work.  I tried using the &quot;built-in&quot; 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.</p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
   &lt;div class=&quot;col-md-12&quot;&gt;
     &lt;div class=&quot;form-group&quot; ng-class=&quot;{ 'has-error' : abc.myForm.$submitted &amp;&amp; abc.myForm.email.$error.required &amp;&amp; abc.myForm.email.$error.pattern  }&quot;&gt;
    &lt;label&gt;Email&lt;/label&gt;
    &lt;input type=&quot;email&quot; name=&quot;email&quot; class=&quot;form-control&quot; ng-model=&quot;abc.user.email&quot; ng-pattern=&quot;emailFormat&quot; required&gt;
    &lt;p class=&quot;help-block error-block&quot;&gt;Enter a valid email address.&lt;/p&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>See the whole form at <a href="https://plnkr.co/edit/3lAMOM3agSMGC9AAr2IT?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/3lAMOM3agSMGC9AAr2IT?p=preview</a></p>
  <h2>Update</h2>
  <p>To clarify, I am using <code>novalidate</code> because I don't want to use the HTML5 built-in error message.  If I remove that, I get</p>
  <p><a href="https://i.stack.imgur.com/8QkGh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8QkGh.png" alt="enter image description here" /></a></p>
  <p>instead of</p>
  <p><a href="https://i.stack.imgur.com/8QSaz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8QSaz.png" alt="enter image description here" /></a></p>