Using liveview form to send data back to controller

chrisdel101

In LiveView how can I pass my data back to the controller? Non-liveview like Route.path_helper(conn, :new, user: @user, employee: @employee). I need the same map or keyword list as shown.

This is my latest iteration. I need those user and employee fields attached to each form, so I can’t just use html. Where can I put such a list of values here?

    <.form let={_f} for={:alert}  phx-submit={:alert}  #user: @user, employee: @employee>
        <%= submit "Alert1", class: "btn btn-primary" %>
        </.form>

Then in the controller. I need value to be a map (or whatever)

def handle_event("alert", value, socket) do
   IO.inspect(value) => {} # is currently an empty map. Only the first arg is correct.

I’ve asked on this question use form_for in liveview component without model or changeset. And this is similar to this too live_component inside of a form_for

6 comments

/phoenix #liveview #liveview-form

0 1878 6

2023-05-13 02:53:17 UTC

First 6 of 6 Posts

LostKobrakai

You can put the additional values in a hidden input on the form for them to be submitted with the rest of the forms data.

Post #1

chrisdel101

Is that the orthodox way to do it?

Can U give an example? I can’t get it to work.

    <% IO.inspect(@current_employee.organization_id ) %> # 7
    <% IO.inspect(user.id ) %> # 2

     <.form let={_f} for={:alert}  phx-submit={:alert}>
          <%= hidden_input :organization_id, @current_employee.organization_id %>
          <%= hidden_input :user_id, user.id %>
        <%= submit "Alert", class: "btn btn-primary" %>
        </.form>

Give the error
no function clause matching in Phoenix.HTML.Form.generic_input/4

Post #2

codeanpeace

I’d suggest generating the hidden input via a Phoenix.Component rather than via Phoenix.HTML.Form assuming you’re running a recent version of LiveView.

<.input type="hidden" field={@form[:user_id]} value={user.id} />

Something like the above assuming you’ve set up the Phoenix.Component.form/1 properly.

Also, sending these ids via the form may be unnecessary if that information is already stored in your LiveView socket which is accessible in your event handlers e.g. def handle_event("alert", value, socket), do: ... end.

Post #3

imkleats

Unless your use-case is more complex than the example with other non-hidden inputs, it sounds like you might be better off using a phx-click binding instead of a form.

Post #4

chrisdel101

Thanks everyone for the ideas!

Main problem solved:

I was missing alot of knowledge. Now I see the problem was the field didn’t work as I thought, i.e. automatically. I ended up just going with html after all, since yes, the rest of the details are still on the socket.

<button class="btn btn-primary" phx-click={:alert} value={user.id}></button>

def handle_event("alert", values, socket) do
    IO.inspect(values) # %{"value" => "1"}

Secondary problem: Re: the input component:

I didn’t know I needed to implement <.input/> myself. I’ve tried using the example here but I get undefined function attr/2. Phoenix 1.6 I think.

So I’m trying this, but I don’t know where it goes. In it’s own file? How do I use it? Since there is no render.

def input(assigns) do
  ~H"""
  <input type="text" name={@field.name} id={@field.id} value={@field.value} class="..." />
  """
end

Post #5

codeanpeace

These two are connected! On more recent versions of Phoenix, a core_components.ex file that implements <.input/> gets generated when creating a new app via mix phx.new my_app. That implementation uses pattern matching to automatically derive and add a :name and :value assign based on the :field assign. So if you want to use <.input/>, you’ll either need to manually add this file/function or implement it yourself.

https://github.com/phoenixframework/phoenix/blob/6095fb3aac9b37baa043374a0766680ab5d93a04/installer/templates/phx_web/components/core_components.ex#L277-L284

It can be a bit confusing at first, especially since the LiveView library includes a standard default .form component, but doesn’t include a standard default .input component. That’s why the autogenerated core_components.ex file includes a .simple_form component that wraps the standard .form component as well as an .input component.

Post #6

— All posts loaded —