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

Learning Resources Guides/Tuts/Tips/Info
,
1

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.

3 Likes
2

Hey @f0rest8 per this stack overflow html - Form inside a table - Stack Overflow the HTML spec does not allow <form> tags to be a child of a table. There are some workarounds but they’re not the most ergonomic. I would suggest not using an actual <table> and instead use a list that is styled to look like a table.

4 Likes
3

Oh wow! Great to know, thanks! I looked at that and I see that what I’m doing is this method from the stack overflow solution:

HTML 5 introduces the form attribute. This allows you to provide one form per row outside the table and then associate all the form control in a given row with one of those forms using its id.

Except I am still wrapping the row in the form, if it is the currently edited row, which now I understand to be not to spec. Thank you!