Formless input phx-change in live view

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.

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!

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.

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.

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

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}.

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