I have this form : http://jsfiddle.net/dfJeN/
As you can see the name value for the input is statically set :
name="username"
, the form validation works fine (add something and remove all text from the input, a text must appears).
Then I try to dynamically set the name value : http://jsfiddle.net/jNWB8/
name="{input.name}"
Then I apply this to my validation
login.{{input.name}}.$error.required
(this pattern will be used in an ng-repeat) but my form validation is broken. It is correctly interpreted in my browser (if I inspect the element I saw login.username.$error.required).
Any Idea ?
EDIT: After logging the scope in the console it appears that the
{{input.name}}
expression is not interpolate. My form as an {{input.name}} attribute but no username.
UPDATE: Since 1.3.0-rc.3 name="{{input.name}}" works as expected. Please see #1404
Nice one by @EnISeeK.... but i got it to be more elegant and less obtrusive to other directives:
You can't do what you're trying to do that way.
Assuming what you're trying to do is you need to dynamically add elements to a form, with something like an ng-repeat, you need to use nested ng-form to allow validation of those individual items:
Sadly, it's just not a well-documented feature of Angular.
Just a little improvement over EnlSeek solution
Here is a plunker trial. Here is detailed explantion
I used Ben Lesh's solution and it works well for me. But one problem I faced was that when I added an inner form using
ng-form
, all of the form states e.g.form.$valid, form.$error
etc became undefined if I was using theng-submit
directive.So if I had this for example:
And in the my controller:
So I had to go back to using a regular click event for submitting the form in which case it's necessary to pass the form object:
And the revised controller method:
I'm not quite sure why this is but hopefully it helps someone.
This issue has been fixed in Angular 1.3+ This is the correct syntax for what you are trying to do:
Using nested ngForm allows you to access the specific InputController from within the HTML template. However, if you wish to access it from another controller it does not help.
e.g.
I use this directive to help solve the problem:
Now you use dynamic names wherever is needed just the 'dynamic-name' attribute instead of the 'name' attribute.
e.g.