[Live Component] How to submit form with submit button only?

[matthieumastadenis]

Everything is in the title: How can I force a live component with form (using ComponentWithFormTrait) to only submit the form after a click on the submit button, and NOT automatically?

I feel like this is something very simple, yet I can't figure how to achieve it. I asked around already, some people actually said to me that it was probably not possible because the point of live components with forms IS to auto submit.

Yet I disagree with that statement. There are many situations where autosubmit is not the best scenario, like for example:

• If the purpose of the form is to create something, you probably don't want to trigger validation and show errors before the user has already filled all required fields ;
• If the purpose of the form is to perform a search that is time consuming (because you have a lot of records, or because you use a complex search query with many joins for example), you probably want to save some resources and time by performing only one search, after the user has filled all fields ;
• If the purpose of the form is to edit something important or sensitive, like on an admin page for example, you probably prefer to offer your user the ability to reread the form before submitting it ;
• etc

One could say "don't use live components then", but I also disagree with that. Even if sometimes I don't want autosubmit, I may still want to benefit from:

• partial page refresh without handling ajax requests myself ;
• encapsulation (everything lives in my component) without creating dedicated controllers and routes;
• nesting related components (and if needed benefit from communication between them with events) ;
• etc

I already searched for similar issues and the closest I found was 1858. But it is very specific to the "multiple buttons" scenario, so that's not the solution to what I'm asking.

I tried a lot of different combinations with the attributes data-action and data-model, but nothing seems to work. At best the form is still submitted automatically when I change a field, at worst the form is submitted without calling my live component.

I feel like I've tried everything so now I allow myself to ask. Is this even possible? If so, how exactly please? 🙏

[smnandre]

Hi @matthieumastadenis !

I agree with all your message, except the "probably not possible" part..

Disable auto-validation/submit

{{ form_start(form, {attr: {'data-model': 'norender|*'}}) }}

See: https://symfony.com/bundles/ux-live-component/current/index.html#deferring-a-re-render-until-later

Submit with a button

Just a bit after in the same doc section

<button data-action="live#$render">Apply</button>

Enjoy ;)

[matthieumastadenis]

Thanks @smnandre, it works perfectly!