title: implementing a directive to exclude a hidden input element from validation ($addControl issue)
body: <p>I'm creating a directive to exclude a hidden input element from validation: <a href="http://plnkr.co/edit/Vnwvq2AT7JpgTnoQwGh9?p=preview">http://plnkr.co/edit/Vnwvq2AT7JpgTnoQwGh9?p=preview</a></p>
  
  <pre><code>app.directive('shownValidation', function() {
      return {
        require: '^form',
        restrict: 'A',
        link: function(scope, element, attrs,form) {
          var control;
  
          scope.$watch(attrs.ngShow,function(value){
            if (!control){
              control = form[element.attr("name")];
            }
            if (value == true){
              form.$addControl(control);
            }else{
               form.$removeControl(control);
            }
          });
        }
      };
    });
  </code></pre>
  
  <p>The idea here is if the element is hidden, I will remove the control from the Form so that it will not affect the other input validity. It works fine when I call  <code>form.$removeControl(control);</code>, you can test that in the demo by removing the firstname and clicking on the button to hide the field.</p>
  
  <p>But when I click the button again, the form validity is still true even though the firstname is invalid (empty)</p>
  
  <p>I also tried adding <code>form.$setValidity(form.$valid &amp;&amp; control.$valid)</code> => the validity state is updated as expected but when I type into the firstname, the validity is still false.</p>
  
  <p>My question is how to solve this problem? Thanks for any replies.</p>
  
  <p><strong>Update</strong>:</p>
  
  <p>Thanks to @Michael's answer. Here is the working solution:</p>
  
  <pre><code>app.directive('shownValidation', function() {
    return {
      require: '^form',
      restrict: 'A',
      link: function(scope, element, attrs, form) {
        var control;
  
        scope.$watch(attrs.ngShow, function(value) {
          if (!control) {
            control = form[element.attr("name")];
          }
          if (value == true) {
            form.$addControl(control);
       //Add a forEach to manually update form validity.Thanks to @Michael's answer
            angular.forEach(control.$error, function(validity, validationToken) {
              form.$setValidity(validationToken, !validity, control);
            });
          } else {
            form.$removeControl(control);
          }
        });
      }
    };
  });
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/Ota7pM0iznUmjvWO8zAW?p=preview">Working plunk</a></p>