验证无效（虽然ng-invalid类应用于DOM元素，但未填充指令范围。$ error）

Question

Updated: also, if anyone can tell me how to simplify my code, I would really appreciate that.

In short: I have simple validation rule applied to element

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

I also have style to color invalid entry

 .ng-invalid { background:red }

And when I remove value from input box it's background color is changed, however neither row nor row.item , row.item[0] and row.item[0].field has $error property appeared. myForm.$error doesn't have anything as well.

So I cannot print validation message bellow input box

Longer explanation:

I could have much broader problem than that. Here is my setup (simplified) :

Markup:

Code:

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); 
    }        
}

So I'm creating input boxes dynamically.

Answer 1

The validation is related to ng-form and ng-model directive which means you need either a <form> element or <ng-form element with a name for validation to work.

Then you can access the valid state in the scope using formname.$error .

<form name="myform">
    <input ng-model='row.item[0].field' required />
    <input type="submit" ng-disabled="myform.$error" value="Save" />
</form>

Answer 2

Try to compile the new element on the parent scope, not on the isolated scope. It worked on my case.

$compile(newElement)(scope.$parent);