Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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>
share|improve this question
add comment

2 Answers

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>
share|improve this answer
add comment

For this specific code example you also need to add a "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>

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.