为什么 ngModelCtrl.$valid 不更新？答案

【问题标题】：Why does the ngModelCtrl.$valid not update?为什么 ngModelCtrl.$valid 不更新？
【发布时间】：2014-02-19 10:46:57
【问题描述】：

我正在尝试创建一个指令，该指令包含一个带有 ng-model 的输入字段并知道输入控件是否有效。（我想根据此状态更改指令内标签上的类。）我想使用 ngModelController.$valid 来检查这一点，但它总是返回 true。

formcontroller.$valid 或 formcontroller.inputfieldname.$valid 确实按预期工作，但是由于我尝试使用 formcontroller 构建可重用组件不是很方便，因为我必须确定表单的哪个字段与当前对应指示。

我不明白为什么一个有效而一个无效，因为在角度源中，管理这些状态的代码似乎是相同的：ngModelController.$setValidity 函数。

我创建了一个测试指令，其中包含一个带有必需值和最小值的数字字段。正如您在下面的小提琴中看到的那样，模型控制器仅在页面加载期间触发，之后永远不会改变。

jsfiddle with example directive

指令代码：

angular.module('ui.directives', []).directive('textboxValid',
    function() {
      return {
        restrict: 'E',
        require: ['ngModel', '^form'],
        scope: {            
            ngModel: '='
        },
        template: '<input  type="number" required name="somefield" min="3" ng-model="ngModel" /> '+
          '<br>Form controller $valid: {{formfieldvalid}} <br> ' + 
          'Model controller $valid: {{modelvalid}} <br>'+
          'Form controller $valid: {{formvalid}} <br>',
        link: function (scope, element, attrs, controllers) {
            var ngModelCtrl = controllers[0];
            var formCtrl = controllers[1];

            function modelvalid(){ 
                return ngModelCtrl.$valid;
            }

            function formvalid(){ 
                return formCtrl.$valid;
            }

            scope.$watch(formvalid, function(newVal,oldVal)
            {
                scope.modelvalid = ngModelCtrl.$valid;
                scope.formvalid = formCtrl.$valid;
                scope.formfieldvalid = formCtrl.somefield.$valid;
            });

            scope.$watch(modelvalid, function(newVal,oldVal)
            {
                scope.modelvalid = ngModelCtrl.$valid;
                scope.formvalid = formCtrl.$valid;
                scope.formfieldvalid = formCtrl.somefield.$valid;           
                //This one only gets triggered on pageload
                alert('modelvalid ' + newVal );
            });
        }


    };
    }
  );

有人可以帮我理解这种行为吗？

【问题讨论】：

标签： angularjs validation

【解决方案1】：

我认为是因为您正在观看一个函数，而 $watch 仅在调用此函数时才执行！

这样看模型：

scope.$watch('ngModel', function(newVal,oldVal)
            {
                scope.modelvalid = ngModelCtrl.$valid;
                scope.formvalid = formCtrl.$valid;
                scope.formfieldvalid = formCtrl.somefield.$valid;           
                //This one triggered each time the model changes
                alert('modelvalid ' + ngModelCtrl.$valid );
            });

【讨论】：

手表不是问题，如果您尝试 jsfiddle 上的代码，您会发现 formCtrl.$valid 上的手表确实有效。 modelCtrl 的 $valid 状态不会改变。此外，ngModel 仅在控件中的当前输入有效时才会更改，因此观察它无济于事。还有其他想法吗？

【解决方案2】：

我想通了..

textboxValid 指令有一个 ng-model 指令，由指令模板创建的输入也是如此。然而，这是两个不同的指令，都有各自独立的控制器。

所以，我将解决方案更改为使用如下所示的属性指令。这按预期工作。

.directive('attributetest',
    function() {
      return {
        restrict: 'A',
        require: 'ngModel',
        scope: {            
            ngModel: '='
        },
        link: function (scope, element, attrs, ngModelCtrl) {

            function modelvalid(){ 
                 return ngModelCtrl.$valid;
            }

        scope.$watch(modelvalid, function(newVal,oldVal){
                console.log('scope.modelvalid = ' + ngModelCtrl.$valid );
            });     

        }       

    };
  });

【讨论】：