I'll try to make this as simple as possible.
I've got a page where I need to have X amount of
tags generated depending on the value chosen in a
The dropdown asks, "How many kids do you have?"
If the user selects 3 in the
dropdown, then 3 total
fields are generated and inserted in the
right after the question.
What I've Tried:
I've successfully pulled it off already but it's semi-unreliable and I don't feel like this is the "proper" way to do things.
I tried using
loop logic. I just did something like this:
for(let i = 0; i < selectValue; i++)
It didn't like that. Apparently
is mostly used to iterate through arrays and objects and can't be used with conventional
I tried to pre-generate an array of objects, a multidimensional array, and a JSON-style object with empty but pre-filled fields.
My goal was to generate X objects in an array where X corresponds to the
number that the user chose. Then the
could iterate through this "pre-filled" array, display the inputs, and then I would fill that object later to be sent over HTTP.
Basically when the
changes it would call a function while passing the number the user chose. That function would generate a new array with X amount of objects.
No idea why this didn't work.
Success (but isn't ideal):
I tried binding
[innerHTML] = generatedHTML
that seemed to worked fine, but this seems like a HORRIBLE way to do this. Plus I need to create event binders on each of these new
and I'm not sure if manually inserted [innerHTML] will work properly within Angular2's zones if I insert it in such a terrible fashion.
After getting the inputs added I'd like to access their values in the easiest and most complete way possible. Is it possible to add multiple data inputs to ONE ngModel and then access each individual input through iteration? Or do I need to figure out another way to do this? Could I just put all those inputs under one
and then tie that
to a single data model?
Thanks for the help everyone! Pretty new to Angular 2 but digging it a lot so far :)