Angular insertion of ng-repeat input form

Question

I want to create a nested form using ng-repeat, as shown below. Since my input fields are necessary, I want to add an error message in the following line with something like this: <span ng-show="submitted && editableForm.[e.name].$error.required" class="error">Required field</span> , I know that it is wrong "editableForm. [E.name]. $ Error.required", what is the right way to do this?

UPDATE Just tried adding <ng-form name="rowForm"> , but it only works when I use the hardcode name attribute, in my case it is dynamically generated in [e.name]

Thanks Leo

BRIDE FORM

 <form name="editableForm" novalidate="novalidate"><div class="newEditable"> <ul ng-repeat="row in newRows"> <li ng-repeat="e in rowAttrs"> <input type="text" ng-model="newRows[e.name]" name="e.name" ng-required="e.required"> </li> <li><a href="" ng-click="rm_row($index)">x</li> </ul> </div><a href="" ng-click="newRow()">{{add}}</a> <a ng-show="newRows.length > 0" ng-click="saveIt(editableForm)">{{save}}</a> </form> 

Answer 1

For this specific code example, you also need to add the ng-form attribute to the first ng-repeat :

 <ul ng-repeat="row in newRows" ng-form="innerForm"> 

Now you can do something similar to your original solution to select the desired field:

 <div class="validation_error" ng-show="e.required && innerForm['\{\{e.name\}\}'].$error.required"> Required </div> 

Answer 2

Solved by adding escape to the dynamic name, jsfiddle.net/langdonx/6H8Xx/2

code

 <div class="validation_error" ng-show="e.required && rowForm['\{\{e.name\}\}'].$error.required"> Required </div>