dynamic element validation

[hyusetiawan]

I have a problem with validating inputs that are generated dynamically.
Here is the fiddle that shows the problem: http://jsfiddle.net/flsilva/8JzDb/17/

this is taken from: https://groups.google.com/forum/?fromgroups=#!topic/angular/qLeUWZVuQMI

the name is generated fine but it's not bound to the form scope. Because I can name it correctly but the form is not bound, it seems that this behavior is inconsistent.

Thoughts?

[michaelahlers]

+1

[pkozlowski-opensource]

@hyusetiawan @michaelahlers In the current version of AngularJS you need to use nested ng-form directives (http://docs.angularjs.org/api/ng.directive:ngForm) to validate dynamically generated input fields.

Here is a fixed jsFiddle: http://jsfiddle.net/6H8Xx/ and another example:
http://jsfiddle.net/pkozlowski_opensource/rqARD/1/

Closing for now, please feel free to reopen if you've got any further questions / issues with this one.

[lobomuerto]

I really don't think this issue should be closed. The "solution" (using nested forms) seems more of a hack than a proper design pattern. Nested forms are... untidy. I'm trying to resolve the same problem with dynamic elements generated via directives, to no avail; I need my original form to be aware of its own elements.

[sinelaw]

I agree - this issue should be re-opened and only closed when a proper solution is introduced in Angular.
It would make sense to have something like a "ng-name" directive that allows setting the name from an expression.

[langdonx]

+1

Here's a modified fixed jsFiddle that will let the parent form still submit properly (the escaping makes it pretty nasty): http://jsfiddle.net/langdonx/6H8Xx/2/

[robjames]

+1

[yaroslav-ulanovych]

Faced this problem too.

[yaroslav-ulanovych]

I tried to fix that, but looks like they're already moving in that direction: now attributes are interpolated before directives are linked, so ng-show from the fiddle watches the correct value. The only thing left is to assign a name to a control not in NgModelController but in ngModelDirective, that's one line fix.

[kylebuch8]

I also think that nested forms is going to solve this. If you have a nested form that has radio buttons in it that don't use a dynamic name attribute, you'll run into some issues with selecting the radio buttons.

[seanzx85]

+1 Users are building forms and then having other users submit data through those generated forms. We need dynamic element binding for forms. I have written entire custom validation for our forms currently, but out of the box functionality would be nice. Nesting ng-form does seems pretty messy for us since every field would have to be wrapped.

[kirkbushell]

+1 encountered this issue whilst creating dynamic forms.

[saurabhnanda]

Is this already available in any angular build?

[saurabhnanda]

Also, if this is not already in a build, what's the exact solution using nested ng-forms? As-per the documentation ng-form names are also not interpolated.

[pkozlowski-opensource]

@saurabhnanda no, there is no fix in master yet. There are several PRs opened but those need careful review. The current solution is to use the ngForm directive as described here: http://stackoverflow.com/a/12044600/1418796

[saurabhnanda]

@pkozlowski-opensource -- if one uses the solution given at http://stackoverflow.com/a/12044600/1418796 how can one access the nested forms in the outer controller's scope? It wouldn't be possible, right?

[thoersch]

The "work around" doesn't seem to work on all cases. Radio groups fail on this as the newly applied scope doesn't adhere to them. Here's an example:

http://jsfiddle.net/sEnhs/1/

[vorburger]

+1! it would be great to see this fully supported.. current (1.1.1) nested forms doesn't seem to really work for input type, see e.g. my http://jsfiddle.net/vorburger/8CxRC/7/ for http://stackoverflow.com/questions/17841915/angularjs-ng-model-form-driven-by-ng-repeat-over-ui-model-description-data-how-t

[shahzadc]

+1 -- this would be HUGE

[devmondo]

+1 it would be so huge

[veeracs]

+1 Need this fixed

[wuct]

+1 Need this fixed, too

[caitp]

@scouser3008 this issue was fixed, you don't need to decorate ngModelController at all now. The name attribute is interpolated now.

[AJMcKane]

@caitp Yup, completely my fault flagging this. For IE compatibility I'm having to use v1.2 and got caught up in debugging! Apologies.

[spencerb02]

@caitp I wish I found this thread a year ago when I first had this issue. I used the ng-form hack. Unfortunately, this hack does not work when your dynamic forms that are being repeated several times have radio buttons... because even though the form validation "works", now all of your radio buttons are part of the same radio group and so you can only select 1 on the entire page of forms. But I digress...

We are stuck on 1.2.x for the moment and so my question is, did @Thinkscape 's decorators (found above) prove to be as effective as the eventual solution that is implemented in 1.3.x?

[caitp]

@spencerb02 you mean the decorators from my plunker? :p

So, the stuff that was merged into 1.3.x has some extra meat to it. In particular, it will remove controls from the form controller and re-add them if the interpolated value changes, and the goal is to remove them when they are destroyed, too.

The decorators just interpolate one time, so it can cause problems during ngRepeat if an $index changes, for instance.

[spencerb02]

@caitp excellent. Thank you. Forgive my naivety, but when would indexes change that wouldn't also be a redraw? Also, if I have another unique key to tie it to rather than $index, this won't be an issue, right?

[caitp]

@spencerb02 it's not exactly that simple, if the form is outside of ngRepeat, and the length changes, you can still have stale stuff in the form --- during a redraw, if an element is moved, it is not re-transcluded. http://plnkr.co/edit/rRYgWgdo4M9sUnGiNwqv?p=preview << so, the controller wouldn't be re-created, and it wouldn't create a new scope, just the scope values would change.

[elyadarm]

+1

[gaprl]

+1

[willfaught]

+1

[okev]

+1

[andreaslarssen]

+1

[fouksf]

+1

[raphaelyancey]

+1

[ymartoglio-plb]

+1

[jeremyml]

Thank you to the AngularJS devs for the changes apparently made in 1.3 because I had no trouble getting validation to work for dynamically-added form elements using ngRepeat in AngularJS 1.4.3

To summarize a slightly ambiguous discussion from earlier this year, AngularJS 1.3 now allows you to dynamically assign the name inside ngRepeat using the double curly braces.

name="formControl_{{uniqueId}}"

To reference the form element name in a more complicated path, use this pattern:

ng-messages="myForm[ 'formControl_' + uniqueId ].$error"

There is no longer a need to use subforms (embedded ngForm directives) to make validation work for dynamically added form elements - tested using AngularJS 1.4.3

[oddlyfunctional]

+1

[juancarlosqr]

+1
as @jeremyml said about complicated paths, i ended up using the next path to access a dynamic field inside of an ng-form form, inside of an ng-repeat

mainForm['extraInfoForm_' + $index]['name_' + $index].$error

What a workaround!

Angular version 1.4.5

[matfiz]

Thanks @rafa-gda for the ng-name directive! Works like a charm on 1.4.5

[rafagda]

I'm glad to hear it @matfiz but you do not need that workaround in v1.4.5 since the form directive interpolates the provided name by default. If you use name attribute instead of ng-name in your form it should work just fine.

[matfiz]

@rafa-gda, thanks! But I am using it on input fields, so I can handle more complex validations on nested, dynamically added form elements (conditions on multiple fields). The name attribute in v1.4.5 on input did not interpolate, I had to use your hacky ng-name :)

[gkalpak]

@matfiz, input fields support interpolated name attributes since v1.3.0-beta.11 (so all stable 1.3.x and 1.4.x versions). Maybe the problem lies somewhere else.

[matfiz]

@gkalpak, thanks for the useful remark! You were right, thanks to your information I have found an issue elsewhere

[jodinathan]

Is this fixed? I am trying to use input directives but the validations aren't working as expected =\

[gkalpak]

@jodinathan, yes this has been fixed. If you are having problems using dynamic element names, I would suggest creating a live demo of the issue and posting it to one of the appropriate support channels.

Or, if you think you found a bug/regression, please open a new issue with a detailed description (and preferrably a live demo - e.g. using CodePen, Plnkr etc).

[diwanoli]

is this issue fixed ? I am struggling same issue . Could you please work around other than nested ng-form

[diwanoli]

I am getting below error when i use {{}} symbol in ng-messages directive

Error: [$parse:syntax] Syntax Error: Token '{' is an unexpected token at column

- [<select-ist-stake name="istStakeRole{{$index}}" ng-model="team" ng-required="true"></select-ist-stake>
                        <span class="help-block" ng-messages="stakeHolderForm.istStakeRole$index.$errors" ng-show="stakeHolderForm.$submitted || stakeHolderForm.istStakeRole$index.$touched || stakeHolderForm.istStakeRole$index.$error" >
                            <span ng-messages-include="common/components/validations/validationMessages.tpl.html"></span>
                        </span>
 ] 

[gkalpak]

@diwanoli, if you think this is a bug, please open a new issue providing all necessary details (ideally a runnable demo of the problem). If you are not sure if this is a bug in Angular, try asking a question on one of the support channels.

[sajjadabdi]

+1

[sajjadabdi]

+1