title: Why AngularJs form.$invalid is true when form loads
body: <p>I have just started working on AngularJS and I am trying my hand at form validation. When I want to highlight the fields in red color when form.$invalid is true. All the fields on the form are required and that is the only validation possible.</p>
  
  <p>Some fields have value selected when form is loaded,others do not have any initial value. </p>
  
  <p>Now to give red highlighted color to required fields I do following:</p>
  
  <pre><code> &lt;form name="createForm" &gt;
    &lt;input type="text" name="name" ng-class="createForm.$invalid ? 'invalidaClass' : ''" required&gt;
  
     ...
   &lt;/form&gt; 
  </code></pre>
  
  <p>Where invalidClass applies red color to required fields. however when i load the form all fields y default get red highlight color and has invalidClass applied. I also printed </p>
  
  <pre><code>     {{createForm.$invalid}}
  </code></pre>
  
  <p>property value when page loads and it is null. I would like to apply red highlight to fields only when there is no value in them. but not on load of the form. Is this a valid scenario what I am facing? What should be the correct way to do this? </p>
  
  <pre><code>   In Addition to this I would like to  show this error only when I click on one of the two buttons. How to achieve this?
  </code></pre>