Nested forms drawn field by field lose their full names

Given the following form definition:

```js
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

```pug
!=formFilter.toHTML(bootstrapField)
```

I get the following query:

```js
{ filter: { uname: 'lala@example.com', role: [ 'm', 'g' ]} }
```
But if I draw the form fields individually (because of layout needs):

```pug
.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:
```js
{ 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!