title: AngularJs validate form with input field from directive
body: <p>I'm working on a project, which has similar submit forms, so I have decided to move some fields to directives.</p>
  
  <p><strong>Form example:</strong></p>
  
  <pre><code> &lt;div loading class="col-sm-12" ng-controller="Controller"&gt;
          &lt;form name="myForm" role="form" novalidate&gt;
              &lt;fieldset class="lines-header-border"&gt;
                  &lt;div class="col-sm-6"&gt;
                     &lt;div class="form-group"&gt;
                         &lt;label class="col-sm-4 control-label"&gt;Date&lt;/label&gt;
                         &lt;div class="col-sm-7"&gt;
                              &lt;date-field 
                               model="myModel" 
                               date-picker-options="datePickerOptions"
                               for-name="date"
                               for-ng-class="myForm.date.$invalid"
                               is-required="true"/&gt;
  
                         &lt;/div&gt;
                       &lt;div class="col-sm-4"&gt;
                      &lt;input class="form-control" 
                             name="amount" 
                             ng-model="amount" 
                             ng-class="{ 'has-error' : myForm.amount.$invalid }" 
                             required/&gt;
                  &lt;/div&gt;
                      &lt;/div&gt;
              &lt;/fieldset&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>Date field directive:</strong></p>
  
  <pre><code>.directive('dateField', function() {
      return {
          restrict: 'E',
          replace: true,
          scope: {
              model: '=',
  
              datePickerOptions: '=',
  
              isRequired: '@',
  
              forName:'@',
  
              forNgClass: '&amp;'
          },
          template: '&lt;input ui-date="datePickerOptions" type="date" name="{{forName}}" class="form-control"  ng-model="model" ng-class="{ \'has-error\' : forNgClass()}"  ng-required="isRequired"/&gt;'
      };
  });
  </code></pre>
  
  <p><strong>Validation problem on submit:</strong>
  Other fields gets validated on form submit button click, but this date field isn't. I think that the problem is in <code>for-ng-class="myForm.date.$invalid"</code>. </p>
  
  <p>Any suggestions?</p>