Keep Form Values On Validate in Liveview

I have a LiveView with a simple form that has 2 fields by default text_input for question and select_input to show a text_input for an answer or not.

So I use an event to handle this, however when a user inputs something in the question field and chooses to show the answer field the question fields returns empty on.

Here is my LiveView code:

def mount(_session, _, socket) do
    {:ok, assign(socket, action: "View", questions: QuestionController.get_questions, answerable: "No")}
  end

  def render(assigns) do
    AdminView.render("index.html", assigns)
  end

def handle_event("validate", %{"_target" => _target,
  "add" => %{"answerable" => answerable}}, socket) do
    {:noreply, assign(socket, action: "Add", answerable: answerable)}
  end

Here is my template:

 <%= if @action == "Add" do %>
  <h2> Add Questions </h2>
 <form action="#" phx-submit="add" phx-change="validate">
  <%= text_input :add, :question, placeholder: "Type Your The Question Here!" %>
 <%= select :add, :answerable, ["Yes", "No"], prompt: "Do you want to save its answer? (No by default!)"%>
  <%= if @answerable == "Yes" do
text_input :add, :answer, placeholder: "Type The Right Answer Here!
end"%>
  <%= submit "Submit", phx_disable_with: "Adding..." %>
  </form>
  <%= end %>
</section>

My question is how to keep the others fields values on validate?

You could use Ecto changesets.

You can find an example in the phoenix_live_view_example project (I’ve linked to User New liveview).

1 Like