title: Angular validate only when input has data
body: <p>I am using angular 1.4 with ng-pattern and a custom async validator. </p>
  
  <p>I have 2 fields with validation, one is required and the other is not. I need to validate the second filed WHEN it DOES have something in it. Issue is that I cannot submit the form when the second field's validators do not pass.</p>
  
  <p>Is there an elegant way of doing this?</p>
  
  <p>Thanks</p>
  
  <pre><code>&lt;input
      name="name"
      type="text"
      ng-model="model.software.name"
      required&gt;
  &lt;div ng-messages="myForm.myInput.$error" ng-if="myForm.name.$touched &amp;&amp; myForm.name.$invalid"&gt;
      &lt;p ng-message="required"&gt;Required warning&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;input
      name="myInput"
      type="text"
      ng-model="myInput"
      ng-pattern="/someregex/"
      async-validator&gt;
  &lt;div ng-if="myForm.myInput.$pending"&gt;PENDING&lt;/div&gt;
  &lt;div ng-messages="myForm.myInput.$error" ng-if="myForm.myInput.$touched &amp;&amp; myForm.myInput.$invalid"&gt;
      &lt;p ng-message="pattern"&gt;Pattern warning&lt;/p&gt;
      &lt;p ng-message="asyncValidator"&gt;async warning&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;button ng-click="process()" ng-disabled="myForm.$invalid"&gt;Process&lt;/button&gt;
  </code></pre>
  
  <p>And here is my validator:</p>
  
  <pre><code>app.directive('asyncValidator', ['$http', '$q', function ($http, $q) {
      return {
          require : 'ngModel',
          link : function (scope, element, attrs, ngModel) {
              ngModel.$asyncValidators.asyncValidator = function (modelValue, viewValue) {
                  return $http.post('path', {value : viewValue}).then(
                      function (response) {
                          if (not_good) {
                              return $q.reject(not_good);
                          }
                          return true;
                      }
                  );
              };
          }
      };
  }]);
  </code></pre>