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

3 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

this is similar to my question... ng-form DOES work even if the name is dynamic (as in my case also) - what makes you say it doesn't? If you could post a complete JS Fiddle or Plunker, I may be able to help. But there are still some issues though (e.g. I'm having trouble with dynamic input type), note Issue 1404...

share|improve this answer
 
Hi vorburger, Its my fault. I didn't mean dynamic name wont' work, I just couldn't get it to work because I don't know what to put into the ng-show condition to show the error message. NOW I think I found the answer jsfiddle.net/langdonx/6H8Xx/2. It has to be escaped like form['\{\{field.name\}\}'].$error.required. Thanks –  user1883793 Jul 26 '13 at 1:55
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 you 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.