title: angularjs Adding custom css class for specific input in form validation
body: <p>I need to add a custom css class to the parent div of my inputs :</p>
  
  <pre><code>&lt;form role="form" name="myForm" ng-class="getCssClasses(myForm.username)"&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="user"&gt;Username :&lt;/label&gt;
          &lt;input type="text" 
                  class="form-control"
                  ng-model="user.username"
                  name="username"
                  required
                  ng-minlength="3" 
                  ng-maxlength="16"
                  is-taken
          /&gt;
          &lt;span ng-show="myForm.username.$valid" class="glyphicon glyphicon-ok form-control-feedback"&gt;&lt;/span&gt;
          &lt;span ng-show="myForm.username.$error.isTaken || myForm.username.$error.maxlength || myForm.username.$error.minlength || (myForm.username.$error.required &amp;&amp; myForm.username.$dirty)" class="glyphicon glyphicon-remove form-control-feedback"&gt;&lt;/span&gt;
          &lt;span ng-show="myForm.username.$error.isTaken"&gt;Username &lt;b&gt;{{user.username}}&lt;/b&gt; is already taken.&lt;/span&gt;
          &lt;span ng-show="myForm.username.$error.maxlength"&gt;Max length is 16 chars.&lt;/span&gt;
          &lt;span ng-show="myForm.username.$error.minlength"&gt;Min length is 3 chars.&lt;/span&gt;
      &lt;/div&gt;      
      &lt;div class="form-group" ng-class="getCssClasses(myForm.email)"&gt;
          &lt;label for="email"&gt;Email :&lt;/label&gt;
          &lt;input type="email" 
                  class="form-control"
                  ng-model="user.email" 
                  name="email"  
                  required
                  ng-maxlength="100"
                  is-taken
          /&gt;
          &lt;span ng-show="myForm.email.$valid" class="glyphicon glyphicon-ok form-control-feedback"&gt;&lt;/span&gt;
          &lt;span ng-show="myForm.email.$error.isTaken || myForm.username.$error.maxlength || (myForm.email.$error.required &amp;&amp; myForm.email.$dirty)" class="glyphicon glyphicon-remove form-control-feedback"&gt;&lt;/span&gt;
          &lt;span ng-show="myForm.email.$error.isTaken"&gt;Email &lt;b&gt;{{user.email}}&lt;/b&gt; is already registered.&lt;/span&gt;
          &lt;span ng-show="myForm.email.$error.maxlength"&gt;Max length is 100 chars.&lt;/span&gt;
          &lt;span ng-show="(myForm.email.$error.email &amp;&amp; myForm.email.$dirty)"&gt;Invalid email.&lt;/span&gt;
  
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Is there a way to use the getCssClasses() function for the specified input ? </p>
  
  <pre><code>$scope.getCssClasses = function(ngModelController) {
      return {
          "has-feedback has-error": ngModelController.$invalid &amp;&amp; ngModelController.$dirty,
          "has-feedback has-success": ngModelController.$valid &amp;&amp; ngModelController.$dirty
      };
  };
  </code></pre>
  
  <p>This actually updates all my fields at the same time because the ngModelcontroller is for the entire form. </p>