Feedback about form-validation

[elixirdive]

form_with_core_components.exs throws an (ArgumentError) *2nd argument: not a tuple.
I put time trying to figure out the solution for this, I cant seem to come up with a solution.
Please help

[lubien]

Hi @elixirdive !

I've run the exact same code from the website and from https://github.com/adopt-liveview/adopt-liveview/blob/main/priv/examples/form-validation/form_with_core_components.exs (they're the same) and seems to work

Can you paste your current code and the full error message so we can look at it together 🕵️?

[elixirdive]

form_with_core_components.exs
'
Mix.install([
{:liveview_playground, "~> 0.1.7"}
])

defmodule PageLive do
use LiveviewPlaygroundWeb, :live_view
import LiveviewPlaygroundWeb.CoreComponents

@initial_state %{
"name" => "",
"description" => ""
}

def mount(_params, _session, socket) do
form = to_form(@initial_state, as: :product)
{:ok, assign(socket, form: form)}
end

def handle_event("validate_product", %{"product" => product_params}, socket) do
errors = []

errors =
  if product_params["name"] == "" do
    Keyword.put(errors, :name, :name_cannot_be_empty)
  else
    errors
  end

errors =
  if product_params["description"] == "" do
    Keyword.put(errors, :description, :description_cannot_be_empty)
  else
    errors
  end

form = to_form(product_params, as: :product, errors: errors)
{:noreply, assign(socket, form: form)}

end

def handle_event("create_product", %{"product" => product_params}, socket) do
IO.inspect({"Form submitted!!", product_params})
{:noreply, socket}
end

def render(assigns) do
~H"""

<.form
for={@Form}
phx-change="validate_product"
phx-submit="create_product"
class="flex flex-col max-w-96 mx-auto bg-gray-100 p-24"
>

Creating a product

<.input field={@Form[:name]} placeholder="Name" />
<.input field={@Form[:description]} placeholder="Description" />

    <.button type="submit">Send</.button>
  </.form>
</div>
"""

end
end

LiveviewPlayground.start(scripts: ["https://cdn.tailwindcss.com?plugins=forms"])
'

Error message:

09:45:28.514 [error] GenServer #PID<0.371.0> terminating
** (ArgumentError) errors were found at the given arguments:

• 2nd argument: not a tuple

  :erlang.element(1, :description_cannot_be_empty)
  (liveview_playground 0.1.8) lib/liveview_playgroud/core_components.ex:298: anonymous fn/1 in LiveviewPlaygroundWeb.CoreComponents."input (overridable 1)"/1
  (elixir 1.15.7) lib/enum.ex:1693: Enum."-map/2-lists^map/1-1-"/2
  (liveview_playground 0.1.8) lib/liveview_playgroud/core_components.ex:298: LiveviewPlaygroundWeb.CoreComponents."input (overridable 1)"/1
  (phoenix_live_view 0.20.14) lib/phoenix_live_view/tag_engine.ex:92: Phoenix.LiveView.TagEngine.component/3
  form_with_core_components.exs:56: anonymous fn/2 in PageLive.render/1
  (phoenix_live_view 0.20.14) lib/phoenix_live_view/diff.ex:368: Phoenix.LiveView.Diff.traverse/7
  (phoenix_live_view 0.20.14) lib/phoenix_live_view/diff.ex:546: anonymous fn/4 in Phoenix.LiveView.Diff.traverse_dynamic/7
  Last message: %Phoenix.Socket.Message{topic: "lv:phx-F8eyY_0cqtySLQFC", event: "event", payload: %{"event" => "validate_product", "type" => "form", "uploads" => %{}, "value" => "product%5Bname%5D=c&product%5Bdescription%5D=&_target=product%5Bname%5D"}, ref: "6", join_ref: "4"}
  State: %{socket: #Phoenix.LiveView.Socket<id: "phx-F8eyY_0cqtySLQFC", endpoint: LiveviewPlayground.Endpoint, view: PageLive, parent_pid: nil, root_pid: #PID<0.371.0>, router: LiveviewPlayground.Router, assigns: %{form: %Phoenix.HTML.Form{source: %{"description" => "", "name" => ""}, impl: Phoenix.HTML.FormData.Map, id: "prion" => "", "name" => ""}, errors: [], options: [], index: nil}, changed: %{}, flash: %{}, live_action: :index}, transport_pid: #PID<0.369.0>, ...>, components: {%{}, %{}, 1}, topic: "lv:phx-F8eyY_0cqtySLQFC", serializer: Phoenix.Socket.V2.JSONSerializer, join_ref: "4", upload_names: %{}, upload_pids: %{}}