1

Im currently having an issue where I want to create multiple form inputs with validation. The form elements I want to create will be up to 100 duplicated fields. To do this I have used ng-repeat as can be seen in this small example below. As you may notice I have a dynamic model and name for my input. Everything works fine with the one exception of validation.

When I inspect the element in the html the dynamic name has got applied as expected and the first name input is called test0. As you may know form validation in angular is done using the form name and input name. As my input is dynamically named it seems to be causing issues as you can see by my error output it doesnt seem to log the error correctly, however, if I was to hardcode the name as test0 instead of test{{i}} (which in the html inspection is test0) everything would work. This is an issue as validation on the duplicated inputs is not doable this way and the only way I can think of resolving this is outputting 100 html input elements manually with the only difference being the name of each input. This is not Ideal and I was wondering if anyone knows a way around this issue or if it is a known bug with Angular? Quite possibly I could just be doing something stupid.

<ng-form name="testform">
<div ng-repeat="i in [0,1,2]">
    ERROR {{testform.test0.$error}}
    <label>
        TEST<br />
        <input  name="test{{i}}" ng-model="$parent.test[i]" type="text" required />
    </label>
</div>

Any help with this matter would be greatly appreciated as I have spent a considerable amount of time trying to resolve this issue.

Thanks.

hennes
  • 9,147
  • 4
  • 43
  • 63
J145
  • 607
  • 1
  • 11
  • 16
  • 1
    this might help you solve your problem. http://stackoverflow.com/questions/12044277/how-to-validate-inputs-dynamically-created-using-ng-repeat-ng-show-angular – Prasad K - Google Sep 04 '14 at 13:48
  • Thanks for the input, I had tried something similar to this before but I had it nested in another ng-form and there was still a few issues but once I looked at the example you linked me to in detail I tried it with just the one ng-form and it seemed to work. Thanks :) – J145 Sep 05 '14 at 09:18
  • I think this would be exactly what you are looking for. http://stackoverflow.com/questions/27071413/dynamic-form-name-attribute-input-type-text-name-variable-name-in – SoEzPz Nov 21 '14 at 22:55

0 Answers0