Skip to content

[6.x] Prefilled Alpine.js forms from field values#14706

Open
godismyjudge95 wants to merge 1 commit into
statamic:6.xfrom
godismyjudge95:patch-1
Open

[6.x] Prefilled Alpine.js forms from field values#14706
godismyjudge95 wants to merge 1 commit into
statamic:6.xfrom
godismyjudge95:patch-1

Conversation

@godismyjudge95
Copy link
Copy Markdown
Contributor

This PR solves an issue I ran into just now.

I need to prefill in values for a form so I set up my text.antlers.html like so:

<input
    type="text"
    name="{{ handle }}"
    value="{{ old[handle] ?? get[handle] ?? value }}"
    {{ if placeholder }}placeholder="{{ placeholder }}"{{ /if }}
    {{ if character_limit }}maxlength="{{ character_limit }}"{{ /if }}
    {{ if autocomplete }}autocomplete="{{ autocomplete }}"{{ /if }}
    {{ if step }}step="{{ step }}"{{ /if }}
    {{ if js_driver }}
        {{ js_attributes }}
    {{ /if }}
    {{ if validate|contains:required }}required{{ /if }}
/>

Only problem is I am also using the Alpine.js form driver which then proceeds to clear out the prefilled value attribute. A bit of researching later and I found the .fill modifier for x-model - https://alpinejs.dev/directives/model#fill

By default, if an input has a value attribute, it is ignored by Alpine and instead, the value of the input is set to the value of the property bound using x-model.

But if a bound property is empty, then you can use an input's value attribute to populate the property by adding the .fill modifier.

Exactly what I need. The default remains the same but if the value is already filled it populates the x-model property with the value attribute's contents.

Not sure there is a way to programatically test this - if so I'd be happy to submit one.

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 this pull request may close these issues.

1 participant