Formless input phx-change in live view

Phoenix Forum Questions / Help
,
1

I am creating a table, where users may edit some fields just by typing and changing their text. It is a functional component that my be placed in a Live Component or in a Live View. My idea is to not use forms for it, just having the input tag send the changes to the server using phx-change and dealing with it from there.

The component that renders a cell looks like this:

<td>
  <input
    type="text"
    id={"#{@field_name}--#{@row_id}"}
    name={"table[#{@field_name}--#{@row_id}]"}
    value={@value}
    phx-debounce={500}
    phx-change={assigns[:"phx-change"]}
    {Map.take(assigns, [:"phx-target"])}
  />
</td>

But, when I try to use this in a LiveView without passing a phx-target, as I want the event to be sent to the live view, the error Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')... is raised by view.js at the line let cidOrSelector = target.getAttribute(this.binding("target")) in the targetComponentID method.

Not sure if this has some relation to this input not having form ancestor, or if I am missing something. Any help would be greatly appreciated.

1 Like
2

Any reason for that? You can easily assign inputs to a form elsewhere in the page with the form attribute, so no need to wrap the whole table in a form.

3 Likes
3

I just try to keep my markup and components as clean as possible. The table may be used in a view with no editable fields and I did not want to add a form element as its parent when it is not needed. The solution to accomplish that was looking ugly IMO.

But the form attribute solves that in an acceptable way for me. I simply did not remember it even existed.

I would prefer not having to include this form element as it makes the functionality depend on two separate components sharing the id information to make an event in one of them work. The form tag, in theory, should not need to exist. But that is just me being extremely picky.

Thank you for you help!

4

Why would the table be aware of it’s contents in the first place? I’d imagine it like this:

<.form id="a" …></.form>
<.table>
  <:col>
    <.input form="a" …>
  </:col>
</.table>

No need to share any implementation details across components.

1 Like
5

My td subcomponent was made only to be used by the table component. For now I only need one table per view. So, it all looks like this:

table component is used as:

<.table rows={@rows} fields={@fields} />

table.html.heex renders:

<form id="table--form" />
<table class="table">
  <thead class="table--header">
    <tr class="table--header_row">
      <th :for={field <- @fields} class="table--header_cell">
        <%= field.label %>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr :for={row <- @rows} class="table--row">
      <.td
        :for={field <- @fields}
        value={row[field.name]}
        type={field.type}
        field_name={field.name}
        row_id={row.id}
        {Map.take(field, [:"phx-change", :editor])}
        {Map.take(assigns, [:"phx-target"])}
      />
    </tr>
  </tbody>
</table>

When attribute editor = :textbox, td.ex renders:

<td>
  <input
    type="text"
    form="table--form"
    id={"#{@field_name}--#{@row_id}"}
    name={"table[#{@field_name}--#{@row_id}]"}
    class="td--text_input"
    value={@value}
    phx-debounce={500}
    phx-change={assigns[:"phx-change"]}
    {Map.take(assigns, [:"phx-target"])}
  />
</td>

I agree with you: I could instead add a form attribute to td. But the ideal world for me would be not having to add the form tag in table, nor the form attribute in td, nor the form attribute in the input. Reducing boilerplate, having a cleaner code.

1 Like
6

Formless inputs are not allowed in LiveView: Prevent exception with inputs without a form by mveytsman · Pull Request #2343 · phoenixframework/phoenix_live_view · GitHub

1 Like
7

For anyone coming across this thread with a usecase where you wanna use a form input without form, it’s achievable with a hook pretty simply, here’s what I came up with

The Javascript hook (named Formless)

export default {
  mounted() {
    this.el.addEventListener('change', event => {
      const eventName = this.el.dataset.event

      this.pushEvent(eventName, { value: event.target.value })
    })
  }
}

The usage

<select data-event="selectUpdated" phx-hook="Formless" id="some-id">
 ...
</select>

And when the select gets updated it fire the selectUpdated with %{"value" => the_value}.

1 Like
8

Thank you for this! I thought I was losing my mind. Good to know it isn’t supported.

1 Like