Angularjs nested form input validation ng-repeat

angularjs

Solution

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

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

You can now do something similar with your original solution to highlight the required field:

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

Problem

I am want to build a nested form using ng-repeat like following. Since my input fields are required, I want to add a error message in the next line with something like this: `<span ng-show="submitted && editableForm.[e.name].$error.required" class="error">Required field</span>`, I know this is wrong "editableForm.[e.name].$error.required", what is the right way to do this? UPDATE Just tried adding `<ng-form name="rowForm">`, but this only works when I use a hardcode name attribute, in my case this is dynamically generated in [e.name] Thanks Leo NESTED 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> ```

Original source