I’m trying to reset my LiveView form programmatically (on submit) but I’m having lots of trouble getting the form to reset programmatically in a way where my LiveView can trigger the reset.

My form is driven by an Ecto embedded schema that is specific to this form (since my persistence is not via Ecto itself but instead a remote api that is mediated by a separate js script). I am using core components which I would expect to support this.

Things I’ve tried/links I’ve tried:

• How do I reset form input on submit?
• https://stackoverflow.com/questions/70632646/phoenix-liveview-form-submit-clear-reset-input-value
• https://stackoverflow.com/questions/79022720/reset-form-after-submission-elixir-liveview
• Changing core_components input/1 from assign_new(:value, fn -> field.value end) to assign(:value, field.value)
• “Reset Form” section of the docs Form bindings — Phoenix LiveView v0.20.17
  • This only mentions resetting forms by providing an HTML form, nothing about resetting forms via LiveView itself (or via js)

No matter what I try I can’t get the form to change based on my liveview assigns unless I manually set value={@something}. But none of the examples I see include setting value and I don’t see a straightforward way to get the value of a field. I guess there’s Phoenix.HTML.Form.input_value but it feels wrong to use that directly in a form (it would make sense in a re-usable component but not in a form).

I’d like to avoid needing to trigger the reset from javascript if possible because this seems to me like something that should be possible directly from LiveView (and from other answers here it appears to be).

I feel like I’m missing something simple, hence the forum post.

My LiveView looks like:

  defmodule MyForm do
    use Ecto.Schema

    @primary_key false
    embedded_schema do
      field :note, :string
      field :amount, :string
    end
  end

  def reset_form(socket) do
    assign(socket,
      form:
        %MyForm{}
        |> Ecto.Changeset.change()
        |> Phoenix.Component.to_form()
    )
  end

  def render(assigns) do
    ~H"""
    <div class="w-full max-w-md mx-auto p-4">
      <div className="relative">
        <.form for={@form} phx-change="validate" phx-submit="submit">
          <.input
            id="note-input"
            field={@form[:note]}
            class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white shadow-sm transition-colors duration-200"
            type="text"
            placeholder="Note"
          />
          <.input
            id="amount-input"
            field={@form[:amount]}
            type="text"
            inputmode="decimal"
            placeholder="amount"
          />

          <.button>Send!</.button>
          <button type="reset" name="reset">Reset</button>
        </.form>
      </div>
    </div>
    """
  end

  def handle_event("validate", params, socket) do
    socket = reset_form(socket)
    {:noreply, socket}
  end

  def handle_event("submit", params, socket) do
    socket = reset_form(socket)
    {:noreply, socket}
  end

Note: the reset button does reset the form but I don’t think I can directly trigger the reset button via LiveView

Here’s a repo with a reproduction:
https://github.com/axelson/phoenix_live_view_reset_form_repro

Steps to reproduce

• Run mix.setup
• Run iex -S mix phx.server
• Visit http://localhost:4000
• Fill out the form
• Press submit
• The form is not cleared but I would expect it to be cleared because I call reset_form which assigns a fresh @form assign