How to have an input field with dynamic name fully working (validating, etc)?

[Flavio Silva]

Hi,

I'm working with angular in the last two weeks. It's pretty nice and I was enabled to do even not so trivial things like creating a custom directive.

But I can't figure out how to have a input field with dynamic name fully working.

I can see several (not trivial) scenarios where it is needed, such as some kind of form generator, so I'm assuming no one will ask me why I need to do it.

I've spent several hours trying to do it, have read a lot of angularjs.org docs but I'm missing something. Like I said I'm pretty new to angular, but I've a good understanding of the general concepts such as DI, MVC, etc.

I've tried to create a directive that somehow compile the dynamic name of the input, but without success. I don't know if this is the way to do it.

I've created a very simple jsfiddle with a basic two-field dynamic form which exactly represents my scenario and what I expect to happens.

http://jsfiddle.net/flsilva/8JzDb/8/

The expected result is that the fields should be validated, ie. "Can't be empty." message should appear when the fields are empty.

I want to do it in the angular way, not an ungly hack.

If I can write a very simple directive like "dynamic-name='my_dynamic_generated_string'" and somehow put it into the name attribute it would be great.

Anyone know what's the better way to handle it?

Let me know if there's a better way to do it.

Any help is appreciated.

Thanks,

Flavio Silva

[Flavio Silva]

fixed a typo..

http://jsfiddle.net/flsilva/8JzDb/17/

[Michael Ahlers]

I'm trying to accomplish something similar with dynamic forms, and I can't find any viable solutions for the life of me. If you've made any progress, please pass it along here.

[Witold Szczerba]

The code you provided does not work, because angular forms does not
resolve input names, they have to be provided directly in markup.
For example:
<form name=form1>
<input type=text name="this_is_ok">
</form>
<tt>{form1}}</tt>

The code above works fine, but the following will not:
<form name=form2>
<input type=text name="{{ 'this'+'is'+'not'+'ok' }}">
</form>
<tt>{{form2}}</tt>

It does not work, because the name of an input is not to be resolved,
it must be known at compile time.

I would try creating a directive which would use $compile service to
create and append form with input fields to produce dynamic forms. Or
maybe there is more straightforward way?

Regards,
Witold Szczerba

On 22 August 2012 00:38, Flavio Silva <flsi...@gmail.com> wrote:
> fixed a typo..
>
> http://jsfiddle.net/flsilva/8JzDb/17/
>

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en.
>
>

[Michael Ahlers]

By the way, I set up an example on jsFiddle which accomplishes my needs (you may find it similarly helpful). The problem I've run into is when I use that code in my production environment, validation handling is incorrect (fields remain required every after having been removed). The point being: if you're having problems with dynamically generated forms and validation, it might be something entirely unrelated.

[Michael Ahlers]

A link to that jsFiddle might help: http://jsfiddle.net/michaelahlers/z9SJ6/

[Matjaž Lipuš]

you can have dynamic field name. but you must create a directive with controller, that sets name attribute.

you can read more about it here: 

https://groups.google.com/forum/#!topic/angular/YFVb5d54dY0

[Sander Elias]

Hi Matjaž Lipuš,

That question was almost 2 years old, I guess they had figured it out by now ;)

Regards

Sander