angularjs - Validation not working (Directive scope.$error is not populated although ng-invalid class is applied to DOM element) -

updated: also, if can tell me how simplify code, appreciate that.

in short: have simple validation rule applied element

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

i have style color invalid entry

 .ng-invalid { background:red } 

and when remove value input box it's background color changed, neither row nor row.item , row.item[0] , row.item[0].field has $error property appeared. myform.$error doesn't have well.

so cannot print validation message bellow input box

longer explanation:

i have broader problem that. here 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 = ''         (var g in row.items ) {            var itempath = 'row.items['+g+']'             (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.

the validation related ng-form , ng-model directive means need either <form> element or <ng-form element name validation work.

then can access valid state in 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>