Tip for rendering forms per row in a table (e.g. the new phx 1.7 table component)

Hi,

TLDR: form attribute set on the input fields and button submit.

I just wanted to share a solution I discovered when making live inline table row editing with phx 1.7 and the latest LiveView using a slightly modified table component from the one provided in new phx 1.7 projects.

I had run into an issue where the form would suddenly become null and I found a solution by adding a form attribute to the input fields and the button for submitting the form.

That kept the forms in sync when clicking to a new row and they would be rendered or not based on a helper function that would determine if and which row is being edited.

I don’t think I’m allowed to share the code since it is for my non-Metamorphic job. But if anyone is struggling with this kind of situation, and has gotten as far as having the form able to submit at least once on a full page refresh, then this may be the answer.

And I debugged it by setting a hook on the button and checking out whether the form was being populated or set to null whenever an event would go over the wire with

Hooks.Submit = {
  mounted() {
    console.log("Hook mounted!", this.el);
  },
  updated() {
    console.log("Hook updated!", this.el);
  }
}

Anyway hope this helps, sorry it’s not a clearer code showcase. Update: you don’t necessarily need to add the formaction attribute.