CODEWITHSUNDEEP
elixirphoenix-frameworkphoenix-live-view
Hoetmaaiers
Hoetmaaiers

Reputation: 3503

Phoenix LiveView form submit, clear/reset input value

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

Upvotes: 4

Views: 3537

Answers (2)

loving marshmallow
loving marshmallow

Reputation: 331

If you want validation, using a changeset (Ecto) can give all lot of fire power. And <.form> will handle automagically!

Upvotes: 0

Allyedge
Allyedge

Reputation: 85

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.

Upvotes: 0

Related Questions