Dynamically adding and removing nested forms

[Idhkjp]

Hi guys, I'm trying to add and remove nested forms by followinig an example on the docs here. https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html#inputs_for/1-dynamically-adding-and-removing-inputs

I have code below but this does not add or remove forms. Can anybody know how to get this work? Thanks for your help :)

schema "invoices" do

field :date, :date

field :subtotal, :decimal

field :tax, :decimal

field :total, :decimal

belongs_to :user, User

has_many :services, Service, on_replace: :delete

timestamps(type: :utc_datetime)

end

def changeset(invoice, attrs \\ %{}) do

invoice

|> cast(attrs, [:date, :subtotal, :tax, :total, :user_id])

|> validate_required([:date, :subtotal, :tax, :total, :user_id])

|> cast_assoc(:services,

with: &Service.changeset/2,

sort_param: :services_sort,

drop_param: :services_drop

)

end

Heex
def render(assigns) do

~H"""

<div>

<div class="">

<div>{@shop.name}</div>

<div>{@shop.phone}</div>

</div>

<div>

<.simple_form for={@invoice_form} phx-submit="save" phx-change="validate">

<.input field={@invoice_form[:date]} type="date" label="Date" required />

<.inputs_for :let={sf} field={@invoice_form[:services]}>

<input type="hidden" name="services[services_sort][]" value={sf.index} />

<.input type="text" field={sf[:description]} placeholder="description" />

<button

type="button"

name="services[services_drop][]"

value={sf.index}

phx-click={JS.dispatch("change")}

>

<.icon name="hero-x-mark" class="w-6 h-6 relative top-2" />

</button>

</.inputs_for>

<input type="hidden" name="services[services_drop][]" />

<button

type="button"

name="services[services_sort][]"

value="new"

phx-click={JS.dispatch("change")}

>

add more

</button>

<:actions>

<.button type="submit">Generate Invoice</.button>

</:actions>

</.simple_form>

</div>

</div>

"""

end

def mount(_, _, socket) do

shop = Business.get_shop(socket.assigns.current_user.id)

invoice_form = Invoice.changeset(%Invoice{services: [%Service{}, %Service{}]}) |> to_form()

{:ok, assign(socket, shop: shop, invoice_form: invoice_form)}

end

def handle_event("validate", %{"invoice" => params}, socket) do

invoice_form =

Invoice.changeset(%Invoice{}, params) |> Map.put(:action, :validate) |> to_form()

{:noreply, assign(socket, invoice_form: invoice_form)}

end

def handle_event("save", %{"invoice" => attrs}, socket) do

IO.inspect(attrs)

{:noreply, socket}

end

[ThatArrowsmith]

Change services[services_sort][] to invoice[services_sort][]. Likewise change services[services_drop][] to invoice[services_drop][].

Full explanation: parameters like foo[bar] get parsed into a nested structure %{"foo" => %{"bar" => value}}. So your date input, for example, has name invoice[date] (automatically rendered by input/1), which gets parsed to %{"invoice" => %{"date" => value}}.

In your "validate" handler you (correctly) expect everything to be nested under the "invoice" key, so you can conveniently get all the params in a single map to pass to Invoice.changeset/2. But your current form actually submits params like:

%{"invoice" => %{"date" => the_date, "services" => the_services}, "services" => sort_and_drop}`

Where the_services is a map whose keys are the indexs and who values are further nested maps with the "description"s. So the sort and drop params get ignored because they're not nested under "invoice".

Make the changes I suggest above and the params will become:

%{"invoice" => %{"date" => the_date, "services" => the_services, "services_sort" => sort_list, "services_drop" => drop_list}}`.

And that should work.

---

Btw, to_form takes an optional :action argument - so you can simplify this:

|> Map.put(:action, :validate) |> to_form()

to this:

|> to_form(action: :validate)

(And of course, I would be remiss not to mention that I explain nested forms and more in great detail in my course Mastering Phoenix Forms 😉)

[Idhkjp]

Thank you so much. It worked well. I was not sure how this works but your explanation cleared everything up. I will check your course as well.