Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add frontend support for Group fieldtype #1228

Open
mikemartin opened this issue Sep 24, 2024 · 0 comments · May be fixed by statamic/cms#10976
Open

Add frontend support for Group fieldtype #1228

mikemartin opened this issue Sep 24, 2024 · 0 comments · May be fixed by statamic/cms#10976

Comments

@mikemartin
Copy link

mikemartin commented Sep 24, 2024

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant