Nested forms drawn field by field lose their full names
Danita opened this issue · comments
Given the following form definition:
let formFilter = forms.create({
filter: {
uname: fields.string({
label: 'Search by username or email',
}),
role: fields.array({
label: 'By role',
choices: { m: 'Moderator', g: 'Admin', a: 'Artist' },
widget: widgets.multipleSelect()
}),
}
});
On the template side, if I draw the form using
!=formFilter.toHTML(bootstrapField)
I get the following query:
{ filter: { uname: 'lala@example.com', role: [ 'm', 'g' ]} }
But if I draw the form fields individually (because of layout needs):
.row
.col-lg-4
!=formFilter.fields['filter'].fields['uname'].toHTML(null, bootstrapField)
.col-lg-3
!=formFilter.fields['filter'].fields['role'].toHTML(null, bootstrapField)
I get:
{ uname: 'lala@example.com', role: [ 'm', 'g' ]}
I would expect the input names to be derived from the form structure, regardless of how they are rendered. Is there any workaround? Thanks!
whoops, sorry for the mis-close. I'll look into this shortly.
I can not figure out how this keeps getting closed :-/
Sorry for the delay in responding here.
The issue is that, just like a function you extract off an object, once the field is individually rendered, it doesn't have the context to know it's supposed to be nested inside filter
.
I could imagine some kind of API on the form object to directly render a specific field's HTML, but it'd require some kind of magic to allow for field
→ uname
, for example, to be represented.