ideas
ideas copied to clipboard
Add frontend support for Group fieldtype
I've attempted to use the Group fieldtype in a form on the front-end, however I've run into a few issues with field rendering inside groups.
- Options for Select and Radio fields are returned as objects instead of key/value pairs.
- Group field errors are not found within form error data. ie.
x-text="form.errors.{{ group_handle }}.{{ handle }}" - Group fields can only be rendered with an additional
fieldtag pair.{{ fields }}{{ field }}...{{/ field }}{{/ fields }} - Field must be rendered with a partial tag and passing a custom handle. ie.
handle="{ group_handle }.{ handle }"
Here is an example of Group field template that mostly works except for options and error rendering:
{{ group_handle = handle }}
{{ fields }}
{{ field }}
<template x-if="{{ show_field }}">
<div>
<x-label for="{{ group_handle}}.{{ handle }}" class="mb-1">
{{ display }}
</x-label>
<div class="my-2">
{{ partial:vendor/statamic/forms/fields/{type}
handle="{group_handle}.{handle}" }}
</div>
<template x-if="form.invalid('{{ group_handle }}.{{ handle }}')">
<p class="text-sm text-destructive" x-text="form.errors.{{ handle }}"></p>
</template>
</div>
</template>
{{ /field }}
{{ /fields }}
I've also put together a repo where you can reproduce the issue. (note the repo is using the Formatic starter kit) https://github.com/mikemartin/formatic-group/blob/main/resources/views/vendor/statamic/forms/fields/group.antlers.html