🔗 Nested forms in Phoenix LiveView: advanced tips and tricks

In Phoenix LiveView, there’s a standard way to create nested forms - forms that let you edit multiple associated records at once.

The docs give the overview: <.inputs_for> renders nested inputs on your form, then you handle changes on the backend using Ecto functions like cast_assoc/3.

In the Coox app from my course Mastering Phoenix Forms we use this to build a form for editing a recipe. Recipes have nested ingredients and instructions, and you can add, remove and sort instructions using Ecto’s :sort_param and :drop_param.

This follows the standard implementation described in the docs, with further inspiration (such as sorting with Sortable.js) taken from Chris McCord’s Live Beats example app.

It works well enough, but if you want to build something more complicated than a standard set of nested inputs with an “add” and “remove” button, I couldn’t find many good examples online. So in this post we’ll explore some slightly more advanced tricks with Phoenix LiveView nested forms.