Phoenix LiveView form submit, clear/reset input value

Question

I have created this simple form which I handle in my LiveView component. What is the communities best practice for clearing / resetting my form after I submit this?

I do want to take validations etc. into account. Is this then always via an Ecto.Changeset, even when no schema is backing a form directly?

  def handle_event("add", %{"text" => text}, socket) do
    IO.inspect(text)
    {:noreply, socket}
  end

  def render(assigns) do
    ~H"""
    <form phx-submit="add">
      <input type="text" name="text" placeholder="What needs to be done?" autofocus>
      <input type="submit" />
    </form>
    """
  end

Answer 1

LiveView should automatically reset the input field once it is submitted, but that might be an Ecto only thing. You can also write a JS hook for this if you want to clear the input. It's pretty simple.

You can always redirect the user somewhere with a flash message for better UX.