Nested forms drawn field by field lose their full names

[Danita]

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!

[ljharb]

whoops, sorry for the mis-close. I'll look into this shortly.

[ljharb]

I can not figure out how this keeps getting closed :-/

[ljharb]

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.