0

更新：另外，如果有人能告诉我如何简化我的代码，我将不胜感激。

简而言之： 我将简单的验证规则应用于元素

<div ng-form='myForm'>
 <input ng-model='row.item[0].field' required />
</div>

我也有样式来为无效条目着色

 .ng-invalid { background:red }

当我从输入框中删除值时，它的背景颜色发生了变化，但是也row没有出现row.item，row.item[0]并且row.item[0].field出现了$error属性。myForm.$error也没有任何东西。

所以我无法在输入框下方打印验证消息

更长的解释：

我可能有比这更广泛的问题。这是我的设置（简化）：

标记：

代码：

function tableCtrl($scope) {

   var fields  = $scope.fields = [
       { name: 'events', required: true }
      ,{ name: 'subjects' }
      ,{ name: 'affected'}]

   $scope.events = [{ name : 'e', type :'some', organ :'blood'
                  , items : [{ events : 1, subjects: 2, affected : 3 }
                             ,{ events : 1, subjects: 2, affected : 3 }
                             ,{ events : 1, subjects: 2, affected : 3 } ] }
                 , { name:'f', type : 'any', organ :'heart'
                    , items :[{ events : 1, subjects: 2, affected : 3 }
                             ,{ events : 1, subjects: 2, affected : 3 }
                             ,{ events : 1, subjects: 2, affected : 3 } ]}
                 , { name: 'g', type: 'all', organ :'skin'
                    , items : [{ events : 1, subjects: 2, affected : 3 }
                             ,{ events : 1, subjects: 2, affected : 3 }
                             ,{ events : 1, subjects: 2, affected : 3 } ]}]

}
angular.module('components').directive('editor', function ($compile) {
return {
    scope : {
        row : '=editor'          
        , fields : '=fields'
    },        
    terminal:true,

    link: function (scope, element, attrs) {
       var tmpl = ''

       for (var g in row.items ) {
           var itemPath = 'row.items['+g+']'
            for (var f in scope.fields) {
                tmpl += '<td><input type="number" ng-model="'+itemPath+'.'+scope.fields[f].name + '"' +
                  ' min="0"  ' +
                    (scope.fields[f].required? ' required ' : '' )+                           
                    ' /></td>'
            }             
       }   

       var newElement = angular.element(tmpl);
       $compile(newElement)(scope);
       element.replaceWith(newElement); 
    }        
}

所以我正在动态创建输入框。

4

2 回答 2

1

验证与 ng-form 和 ng-model 指令相关，这意味着您需要一个<form>元素或<ng-form具有名称的元素才能进行验证。

然后，您可以使用 访问范围内的有效状态formname.$error。

<form name="myform">
    <input ng-model='row.item[0].field' required />
    <input type="submit" ng-disabled="myform.$error" value="Save" />
</form>
于 2013-05-21T16:17:31.197 回答
0

尝试在父作用域上编译新元素，而不是在隔离作用域上。它适用于我的情况。 

$compile(newElement)(scope.$parent);
于 2015-03-04T04:23:17.497 回答