Ember.js: binding to dynamic form inputs - ember.js

Question

I'm trying to figure out the proper way to collect "variable" personalized data on a product. The product has these personalized fields defined:
"personalization": [
{
"id": 234,
"maxlength": "128",
"prompt": "Text Line 1 (12 character limit)",
"required": "1"
},
{
"id": 235,
"maxlength": "128",
"prompt": "Text Line 2 (12 character limit)",
"required": "1"
}
],
Building a small form to collect that input would be fairly straightforward, except that personalized data can be different for each quantity. So if I order 2 of this item, it can have personalization:
FIRST ITEM
Text Line 1: Yarr
Text line 2: Matey
SECOND ITEM
Text Line 1: Swab
Text line 2: The poop deck
So basically the set of personalized fields needs to repeat for each quantity.
I've got the form built using a computed property:
personalizedForm: computed('quantity', function() {
let q = get(this, 'quantity');
let persform = [];
for (let i = 0; i < q; i++) {
persForm.push(get(this, 'model.personalization'));
}
return persForm;
}),
with this template:
{{#each personalizedForm as |quantity index|}}
Item {{add index 1}}
<ul>
{{#each quantity as |set|}}
<li class="label">{{set.prompt}}</li>
<li class="field">{{input value=????}}</li>
{{/each}}
</ul>
{{/each}}
And that shows a form like the image below. So that's great. But I just can't figure out exactly what to bind each form field to, and how. I imagine the "mut" and "get" helpers are the ticket, but I don't even know how to set up the object to save the data to.
Any help is appreciated!

Answer 1

I think I have this somewhat figured out. On the controller there's a property and a computed property that updates it if/when the quantity changes:
persModel: [], // will contain dynamic model
persModelUpdated: computed('quantity', function() {
let persModel = this.get('persModel');
let persPrompts = get(this, 'model.personalization');
// loop thru quantities
for (let i = 0; i < get(this, 'quantity'); i++) {
// if persModel does not have this set of prompts, push in a copy
if (!persModel.objectAt(i)) {
let copySet = Ember.copy(persPrompts, { 'deep': true });
persModel.pushObject(copySet);
}
}
return persModel;
})
In the template the fields are written out dynamically based on the computed property. I'm using the mut and get helpers to update a 'value' field within each set.
{{#each persModelUpdated as |thisQty index|}}
Item {{add index 1}}
<ul>
{{#each thisQty as |persSet|}}
<li>{{persSet.prompt}}</li>
<li>{{input value=(mut (get persSet 'value'))}}</li>
{{/each}}
</ul>
{{/each}}

Answer 2

I'm not sur to understand you want to find a way to get all the value from the dynamic form ?
You can try to serialize your form.
You have to put the balise form before and after your each like so
<form id="my_form">
{{#each personalizedForm as |quantity|}}
Item {{add index 1}}
<ul>
{{#each quantity as |set|}}
<li class="label">{{set.prompt}}</li>
<li class="field">{{input value=????}}</li>
{{/each}}
</ul>
{{/each}}
<form>
and then in your component .js you can get them by doing
const formArray = Ember.$('#my_form').serializeArray();
to get a array or
const form = Ember.$('#my_form').serialize(); to get a object