title: Valid form - display just 1 error always [angular]
body: <p>I valid my form using patterns / required on all inputs like below:</p>
  
  <pre><code>&lt;div class="crazy-error" ng-show="myFrom.email.$dirty &amp;&amp; myFrom.email.$invalid"&gt;
    &lt;span ng-show="myFrom.email.$error.required"&gt;INVALID: Required&lt;/span&gt;
    &lt;span ng-show="myFrom.email.$error.pattern"&gt;INVALID: Pattern&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This code works cool for me however I want to display just on error all the time so if i have 3 inputs:</p>
  
  <ul>
  <li>name</li>
  <li>email</li>
  <li>color</li>
  </ul>
  
  <p>And for example all 3 are filled incorrectly display error just from first invalid always.</p>
  
  <p>It's obvious it can be done with something like code below for each error display div:</p>
  
  <pre><code>&lt;div class="crazy-error" ng-show="myFrom.email.$dirty &amp;&amp; myFrom.email.$invalid &amp;&amp; (myForm.name.$valid || myForm.color.$valid)"&gt;
  </code></pre>
  
  <p>But this looks a bit messy and as soon as form grow up and will have for example 7 inputs logic become really too complicated.</p>
  
  <p>Is there some nice way to always display just first error instead of all of them?</p>