statamic / ideas

đŸ’¡Discussions on ideas and feature requests for Statamic
https://statamic.dev
32 stars 1 forks source link

Add frontend support for Group fieldtype #1228

Open mikemartin opened 1 month ago

mikemartin commented 1 month ago

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.

  1. Options for Select and Radio fields are returned as objects instead of key/value pairs.
  2. Group field errors are not found within form error data. ie. x-text="form.errors.{{ group_handle }}.{{ handle }}"
  3. Group fields can only be rendered with an additional field tag pair. {{ fields }}{{ field }}...{{/ field }}{{/ fields }}
  4. 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

Screenshot 2024-09-24 at 11 08 07 AM