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

1 participant