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
Trending in Questions
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
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
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
Documentation
While reading the Scoped Routes section, I noticed that the documentation currently refers to a problem without explainin...
New
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
I recently noticed that Elixir’s Logger defaults its primary log level to :debug when no :logger, :level application configuration is pre...
New
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
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
I am happy to introduce the very α version of the new programming language compiled to BEAM.
Welcome Cure.
It has literally three kille...
New
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
Hi everyone!
The first release candidate for the Expert language server project is now available!
We’ve published a press release detai...
New
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
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
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixirconf-us
- #ai
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #hex
- #security










Showing Posts 1 to 3- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
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?
<Field name="email" class="form-control w-1/2">to<Field name={{ :email }} class="form-control w-1/2"><Field name="password" class="form-control w-1/2">to<Field name={{ :password }} class="form-control w-1/2">Nicolas
Hi,
Tanks for you help, using atoms fixes the issue.
I guess surface examples need to be fixed too.
miguels
Glad it worked
We’ll fix the examples and docs asap!