Frontend form field conditions ...

[jesseleite]

For now we'll be shipping with an alpine driver, but this can be expanded later.

Example usage:

Include frontend JS:

<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script src="/vendor/statamic/frontend/js/helpers.js"></script>

Render form using dynamic fields array:

{{ form:contact js="alpine" }}

    {{ fields }}
        <template x-if="{{ show_field }}">
            <div class="p-2">
                <label>{{ display }}</label>
                <div class="p-1">{{ field }}</div>
            </div>
        </template>
    {{ /fields }}

    <button type="submit">Submit</button>

{{ /form:contact }}

Render form with hardcoded fields:

{{ form:contact js="alpine" }}

    <template x-if="{{ show_field:inquiry }}">
        <label>Inquiry</label>
        <input type="text" name="inquiry" value="{{ old:inquiry }}" x-model="inquiry" />
    </template>

    <button type="submit">Submit</button>

{{ /form:contact }}

Todo:

• Create frontend helpers.js dist file with separate webpack config.
• Render x-data on form when js="alpine" is present.
  • Respect old input when there are validation errors.
  • Allow scoping of data with js="alpine:my_form" to prevent collision with their alpine components.
• Render x-model on dynamically rendered fields (will need to be done manually if hardcoding fields).
  • Text field
  • Textarea field
  • Select field
  • Radio field
  • Checkboxes field
  • Assets field
  • Default field partial (used as fallback for custom fieldtypes that might expose themselves to forms)
• Wire up Statamic.$conditions.showField() JS logic.
• Refactor to a class-based driver solution.
  • Extract and decouple all alpine specific PHP to an Alpine driver class.
  • Add ability to define custom drivers for other JS frameworks in user's frontend.
• Add test coverage.
  • For alpine driver
  • For custom JS driver classes
  • For Statamic.$conditions.showField() JS logic
• Fix use of sometimes rule for conditionally applying validation to fields (see Conditionally hidden fields still submit values, preventing use of sometimes, required_if, etc. rules #5092).
• Write documentation (see Frontend form field conditions docs#691).

Closes #5092
Closes statamic/ideas#714

[jesseleite]

@jasonvarga This is done and ready for review, but I made draft because #5101 should be reviewed and merged into this first 👍

[robdekort]

Hey Jesse. I'm trying this one out as it looks great. Currently I already have my own x-data on the form tag. Do you have any thoughts on how you can combine your own Alpine logic with this one?

[robdekort]

Simply moving my own logic a level up gets me further. 👍

[jesseleite]

@robdekort Yes exactly. If you had your x-data on the <form> tag, you just have to move yours up or down a level is all. We also provide x-data scoping to prevent data conflicts between our component and your components 👍

[robdekort]

Sounds good. Will dive in further today. Thanks!!