title: Set form control to untouched on focus using AngularJS
body: <p>In my form, I would like to set form controls as untouched when the user focuses on them in order to hide the validation messages which are displayed when the field is touched and invalid.</p>
  
  <p>How can I do this?</p>
  
  <p>I have tried writing a directive but have been unable to get it to work. I can see in the console that the value in the directive is changing from true to false but the form control doesn't update.</p>
  
  <p><strong>HTML:</strong> </p>
  
  <pre><code>&lt;form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate=""&gt;
      &lt;div class="form-group"&gt;
        &lt;label&gt;Name*&lt;/label&gt;
        &lt;input type="text" name="name" class="form-control" ng-model="user.name" untouch="userForm.name" /&gt;
        &lt;h3&gt;Touched: {{userForm.name.$touched}}&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p><strong>Directive:</strong></p>
  
  <pre><code>validationApp.directive('untouch', function() {
      return {
          restrict : 'A',
          require: 'ngModel',
          scope: {
              untouch : '='
          },
          link: function(scope, element) {
              element.bind('focus', function() {
                  console.log(scope.untouch.$touched);
                  scope.untouch.$setUntouched();
                  console.log(scope.untouch.$touched);
              });
          }
      };
  });
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/oy9YNyaRzh13XHghIUk9?p=preview" rel="nofollow">Plunker</a> </p>