Javascript AngularJS删除表单中禁用字段的验证

我正在尝试创建一个指令，如果字段被禁用，该指令将跳过验证

我正在使用这种方法：

我的指示是：

dashboardApp.directive('shownValidation', function() {
  return {
    require: '^form',
    restrict: 'A',
    link: function(scope, element, attrs,form) {
      var control;

      scope.$watch(attrs.disabled,function(value){          
        if (!control){
          control = form[element.attr("name")];
        }
        if (value == false){
          form.$addControl(control);
          angular.forEach(control.$error, function(validity, validationToken) {
             form.$setValidity(validationToken, !validity, control);
          });
        } else {
         console.log("Before remove control." + control.$name + " Form valid = " + form.$valid);
           form.$removeControl(control);
           console.log("After remove control." + control.$name + " Form valid = " + form.$valid);
        }
      });
    }
  };
});

在我的应用程序控制器中，我有一块手表，用于监视窗体的$valid状态

$scope.$watch("userProfileForm.$valid", function(newValue) {
    console.log("Log in controller for userProfileForm.$valid= " + newValue);
});

我在jsp中的输入声明是：

<input type = "text" name = "title" ng-disabled  = "PROFILE_DISABLED_FIELDS_TITLE" required shown-validation  />

表单中还有其他具有验证器的输入字段，但为了示例的目的，我确保它们都是有效的

如果我在完全加载页面并打印控制台上的消息后在控制器中放置断点，我可以看到

$scope.userProfileForm.$error.required[0]。$name==“title”

但是，如果我看一下表单上不再有字段：

$scope.userProfileForm.title == undefined

你知道我哪里错了吗？或者哪里出了问题

以后编辑：

在阅读了一些关于$watch和$observe的文章后，我发现这两个函数的工作方式与您的角度版本不同，因此我尝试了不同的方法，并为我的案例找到了解决方案：

app.directive('validIfDisabled', function() {
    return {
      require: 'ngModel',
      restrict: 'A',
      link: function(scope, element, attrs,model) {

          var disabled=false;

          function makeModelValid (model){
              angular.forEach(model.$validators, function(validatorValue, validatorKey) {
                    model.$setValidity(validatorKey,true);
                });
          }

          attrs.$observe( "disabled", function (value) {
              disabled = value;
              if(disabled){
                  makeModelValid(model);
              }else{
                  model.$validate();
              }
          }); 

          scope.$watch(function(){return model.$invalid;},function(){
              if(disabled){
                 makeModelValid(model);
              }
          });
      }
    };
  });

---

尝试使用

ng required=“！PROFILE\u DISABLED\u FIELDS\u TITLE”

。这一组需要基于表达式的验证。这是不够的，因为这是一个代码片段，我还有其他字段，如电子邮件和required、ng模式，以及其他自定义验证程序，所以我想要一些可以在每个验证程序上工作的内容。

app.directive('validIfDisabled', function() {
    return {
      require: 'ngModel',
      restrict: 'A',
      link: function(scope, element, attrs,model) {

          var disabled=false;

          function makeModelValid (model){
              angular.forEach(model.$validators, function(validatorValue, validatorKey) {
                    model.$setValidity(validatorKey,true);
                });
          }

          attrs.$observe( "disabled", function (value) {
              disabled = value;
              if(disabled){
                  makeModelValid(model);
              }else{
                  model.$validate();
              }
          }); 

          scope.$watch(function(){return model.$invalid;},function(){
              if(disabled){
                 makeModelValid(model);
              }
          });
      }
    };
  });