Forms
v1.1.0+These components use the new `to_form/2` functionality
For users using the old form structure (pre Phoenix 1.7), please check out
Forms (v1)
<.container max_width="md" class="mx-auto my-20">
<.h2>Simple form</.h2>
<.form for={@form} phx-submit="submit" phx-change="validate">
<.field
required
field={@form[:text]}
placeholder="Text"
phx-debounce="blur"
label="Text"
/>
<.field type="select" field={@form[:select]} options={["Option 1", "Option 2", "Option 3"]} />
<.field
type="checkbox-group"
field={@form[:checkbox_group]}
options={[{"Option 1", "1"}, {"Option 2", "2"}, {"Option 3", "3"}]}
/>
<.field
type="radio-group"
field={@form[:radio_group]}
group_layout="row"
options={[{"Option 1", "1"}, {"Option 2", "2"}, {"Option 3", "3"}]}
/>
<.field
type="radio-card"
field={@form[:radio_card]}
label="Radio card"
options={[
%{label: "8-core CPU", value: "high", description: "32 GB RAM"},
%{label: "6-core CPU", value: "mid", description: "24 GB RAM"},
%{
label: "4-core CPU",
value: "low",
description: "16 GB RAM",
disabled: true
}
]}
size="sm"
variant="outline"
group_layout="row"
help_text="Choose the plan that best suits your needs."
required
/>
<.field type="switch" field={@form[:switch]} />
<.field type="checkbox" field={@form[:checkbox]} />
<.field type="color" field={@form[:color]} />
<.field type="date" field={@form[:date]} />
<.field type="datetime-local" field={@form[:datetime_local]} />
<.field type="email" field={@form[:email]} />
<.field type="file" field={@form[:file]} />
<.field type="hidden" field={@form[:hidden]} />
<.field type="month" field={@form[:month]} />
<.field type="number" field={@form[:number]} />
<.field type="password" field={@form[:password]} />
<.field type="range" field={@form[:range]} />
<.field type="search" field={@form[:search]} />
<.field type="tel" field={@form[:tel]} />
<.field type="time" field={@form[:time]} />
<.field type="url" field={@form[:url]} />
<.field type="week" field={@form[:week]} />
<.field
field={form[:text]}
placeholder="Enter text"
label="Clearable"
type="text"
clearable
/>
<.field
field={form[:text]}
placeholder="This is just a placeholder"
value="https://example.com/invite/your-invite-code"
label="Copyable"
copyable
/>
<.field
type="password"
field={form[:password]}
label="Viewable"
placeholder="Placeholder"
viewable
/>
<div class="flex justify-end">
<.button>Submit</.button>
</div>
</.form>
</.container>
defmodule PetalProWeb.SimpleFormLive do
use PetalProWeb, :live_view
@impl true
def mount(_params, _session, socket) do
changeset = build_changeset()
{:ok, assign_form(socket, changeset)}
end
@impl true
def handle_event("validate", %{"object" => object_params}, socket) do
changeset =
object_params
|> build_changeset()
|> Map.put(:action, :validate)
{:noreply, assign_form(socket, changeset)}
end
@impl true
def handle_event("submit", %{"object" => object_params}, socket) do
changeset = build_changeset(object_params)
case validate_changeset(changeset) do
{:ok, _object} ->
socket =
socket
|> put_flash(:success, "Object successfully created")
|> assign_form(build_changeset())
{:noreply, socket}
{:error, changeset} ->
socket =
socket
|> put_flash(:error, inspect(changeset.errors))
{:noreply, assign_form(socket, changeset)}
end
end
defp assign_form(socket, changeset) do
assign(socket, form: to_form(changeset, as: :object))
end
defp build_changeset(params \ %{}) do
data = %{}
types = %{
text: :string,
select: :string,
checkbox_group: {:array, :string},
radio_group: :string,
radio_card: :string,
textarea: :string,
checkbox: :boolean,
color: :string,
date: :date,
datetime_local: :naive_datetime,
email: :string,
file: :string,
hidden: :string,
month: :string,
number: :integer,
password: :string,
radio: :string,
range: :integer,
search: :string,
tel: :string,
time: :time,
url: :string,
week: :string,
switch: :boolean
}
{data, types}
|> Ecto.Changeset.cast(params, Map.keys(types))
|> Ecto.Changeset.validate_required([:text])
|> Ecto.Changeset.validate_acceptance(:checkbox)
|> Ecto.Changeset.validate_length(:text, min: 3, max: 50)
end
defp validate_changeset(changeset) do
Ecto.Changeset.apply_action(changeset, :validate)
end
end