Nicolas

Nicolas

Hi,
Looking at LiveView and Surface examples I created a first test Component to a Login form (code below).

It appears that this code fails with the following error:

** (exit) an exception was raised:
    ** (ArgumentError) argument error
        :erlang.atom_to_binary("email", :utf8)
        (phoenix_ecto 4.2.1) lib/phoenix_ecto/html.ex:111: Phoenix.HTML.FormData.Ecto.Changeset.input_value/4
        (phoenix_html 2.14.3) lib/phoenix_html/form.ex:482: Phoenix.HTML.Form.input_value/2
        (phoenix_html 2.14.3) lib/phoenix_html/form.ex:825: Phoenix.HTML.Form.generic_input/4
        (surface 0.4.0) lib/surface/components/form/email_input.ex:31: anonymous fn/7 in Surface.Components.Form.EmailInput.render/1
        (phoenix_live_view 0.15.5) lib/phoenix_live_view/diff.ex:356: Phoenix.LiveView.Diff.traverse/6

I’m not used with forms validation using changeset. Can someone help me with this one ?

defmodule ScubananaWeb.Components.LoginForm do
  defmodule FormData do
    use Ecto.Schema
    import Ecto.Changeset

    @primary_key false
    embedded_schema do
      field :email, :string
      field :password, :string
    end

    def changeset(form_data, attrs \\ %{}) do
      form_data
      |> cast(attrs, [:email, :password])
      |> validate_required([:email, :password])
      |> validate_email()
    end

    defp validate_email(changeset) do
      changeset
      |> validate_format(:email, ~r/^[^\s]+@[^\s]+$/,
        message: "must have the @ sign and no spaces"
      )
      |> validate_length(:email, max: 160)
    end

    def validate(params) do
      %FormData{}
      |> changeset(params)
      |> Map.put(:action, :insert)
    end
  end

  defmodule Component do
    use Surface.LiveComponent

    alias Surface.Components.Form
    alias Surface.Components.Form.{Field, Label, EmailInput, PasswordInput}

    data changeset, :changeset, default: FormData.changeset(%FormData{})
    prop submit, :event

    def render(assigns) do
      IO.inspect(assigns.changeset)

      ~H"""
      <Form for={{ @changeset }} change="validate" submit={{ @submit }}>
        <Field name="email" class="form-control w-1/2">
          <Label class="label"><span class="label-text">Email</span></Label>
          <EmailInput class="input input-bordered flex-grow"/>
        </Field>
        <Field name="password" class="form-control w-1/2">
          <Label class="label"><span class="label-text">Password</span></Label>
          <PasswordInput class="input input-bordered flex-grow"/>
        </Field>
        <div class="card-actions w-1/2 mt-4">
          <button type="submit" class="btn btn-primary flex-grow">Login</button>
        </div>

      </Form>
      """
    end

    def handle_event("validate", params, socket) do
      {:noreply, assign(socket, changeset: FormData.validate(params))}
    end
  end
end

Showing Posts 1 to 3

miguels

miguels

Hi @Nicolas!

When using changesets with your form you need to pass atoms as your field names.

Could you try following and let me know if that fixes your issue?

  1. Change <Field name="email" class="form-control w-1/2"> to <Field name={{ :email }} class="form-control w-1/2">
  2. Change <Field name="password" class="form-control w-1/2"> to <Field name={{ :password }} class="form-control w-1/2">
Nicolas

Nicolas OP

Hi,
Tanks for you help, using atoms fixes the issue.

I guess surface examples need to be fixed too. :wink:

miguels

miguels

Glad it worked :smiley:

We’ll fix the examples and docs asap!

— All posts loaded —

Where Next? Top

Trending in Questions Top

RSP87
I’m working on a project that simulates the bumbl example in the programming phoenix book. It acts almost like an email client. We have a...
New
nseaSeb
Hello, I know there is an approach for handling lists that allows for optimized traversal, but I can’t recall the specific method (somet...
New
kpanic
Hi everyone, I am toying with the idea of building a “match maker” for giving personal help to people that wants to start coding. I sta...
New
brecabral
Documentation While reading the Scoped Routes section, I noticed that the documentation currently refers to a problem without explainin...
New
velrest
So my question is quite simple and i have found no conclusive answer on forum, google or AI. Should we use :erlang.float for Integer to ...
New
asweet-confluent
I recently noticed that Elixir’s Logger defaults its primary log level to :debug when no :logger, :level application configuration is pre...
New
ryanwinchester
apply_graft/2 doesn’t rewrite an add_many sub-workflow’s deps on an add step. Grafted jobs cancel with “upstream job was deleted” Version...
New

Other Trending Topics Top

JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
mudasobwa
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
New
marciok
Hi there! We created Gust: A task orchestrator inspired by Airflow. For those who have never heard about Aiflow, it’s a Python-based wor...
New
mhanberg
Hi everyone! The first release candidate for the Expert language server project is now available! We’ve published a press release detai...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Dmk
Xamal is a deployment tool for Elixir apps that deploys native releases to bare metal servers over SSH. It’s a port of GitHub - basecamp/...
New

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews