How can I send a submit message to a livecomponent form from a liveview?

Questions / Help
,
1

I have a modal that is managed inside of the parent liveview. The modal contains a form component. Since the buttons on the modal are at the top-level, I can’t submit the form directly.

How can I send a message to the form component that’s in the modal in order to submit it?

<%= case @modal_action do %>
  # ..........
  <% :record_decision -> %>
    <.live_component
      module={Modal}
      id="record-decision-modal"
      title="Record decision"
      subtitle="Add a new decision to record the associated reasoning and discussion."
      cancel_action="cancel_modal"
      confirm_action="create_decision"
      confirm_text="Create Decision">
      <.live_component module={Decisions.Form} id="decision-form" account={@current_account} />
    </.live_component>
  <% _ -> %>
    <div class="hidden"></div>
<% end %>
2

I believe you can use the JS.push to make sure the event is handled by your LiveComponent.

There’s also phx-target.

Here’s a write up by fly.io that explains further.

3

Thanks, I think I’ll do it with with JS module. Makes a lot of sense after reading that article cheers.