title: How should i fix with ng-invalid and ng-pristine in angular validation?
body: <p>i have a issue about angular validation.</p>
  
  <p>My case point:</p>
  
  <ol>
  <li>I have 2 textfields and 1 button in a form.</li>
  <li>When page load, the button is by ng-disabled with ng-invalid status.</li>
  <li>Then type something text in a textfield, the button ng-disabled to unlock.</li>
  <li>[Problem] When i clear all text in a textfield such as delete key with keyboard, the button ng-disabled not to unlock status.</li>
  <li>If not use 「required」with textfield.</li>
  </ol>
  
  <p>I already put in <a href="https://jsfiddle.net/uyx1swu3/3/" rel="nofollow">jsfiddle</a></p>
  
  <pre><code>&lt;div ng-controller="validationCtrl"&gt;
  
      &lt;form name="xyzForm" novalidate&gt;
  
      &lt;input
          type="text"
          name="name"
          ng-model="xname"
          ng-class="{'has-error': xyzForm.name.$invalid &amp;&amp; !xyzForm.name.$pristine}"
      /&gt;
      &lt;input
          type="number"
          name="age"
          ng-model="xage"
          ng-class="{'has-error': xyzForm.age.$invalid &amp;&amp; !xyzForm.age.$pristine &amp;&amp; xyzForm.age.$dirty}"
      /&gt;
  
      &lt;div&gt;
         &lt;button ng-click="submit()" ng-disabled="xyzForm.$invalid || xyzForm.$pristine"&gt;Submit&lt;/button&gt;
         &lt;span&gt;invalid : {{xyzForm.$invalid}}&lt;/span&gt;
         &lt;span&gt;pristine : {{xyzForm.$pristine}}&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;/form&gt;
  
  &lt;/div&gt;
  </code></pre>