إدخال الأرقام · النموذج
Phoenix
<.form
for={@form}
action={~p"/number-input/form"}
method="post"
>
<.number_input field={@form[:value]} class="number-input">
<:label>Value</:label>
<:decrement_trigger>
<.heroicon name="hero-chevron-down" class="icon" />
</:decrement_trigger>
<:increment_trigger>
<.heroicon name="hero-chevron-up" class="icon" />
</:increment_trigger>
<:error :let={msg}>
<.heroicon name="hero-exclamation-circle" class="icon" />
{msg}
</:error>
</.number_input>
<.action type="submit" class="button button--accent">
Submit
</.action>
</.form>
def number_input_form_page(conn, _params) do
phoenix_form =
Phoenix.Component.to_form(%{"value" => "1234"}, as: :number_input_phoenix, id: "number-input-form-phoenix")
render(conn, :number_input_form_page, phoenix_form: phoenix_form)
end
def number_input_form_submit(conn, params) do
if is_map(params["number_input_phoenix"]) do
value = params["number_input_phoenix"]["value"] || ""
conn
|> put_flash(:info, "Submitted: value=#{inspect(value)}")
|> redirect(to: ~p"/number-input/form#number-input-form-phoenix")
end
end
نموذج Phoenix (changeset)
<.form
for={@form}
action={~p"/number-input/form"}
method="post"
>
<input type="hidden" name="_csrf_token" value={Plug.CSRFProtection.get_csrf_token()} />
<.number_input field={@form[:value]} class="number-input">
<:label>Value</:label>
<:decrement_trigger>
<.heroicon name="hero-chevron-down" class="icon" />
</:decrement_trigger>
<:increment_trigger>
<.heroicon name="hero-chevron-up" class="icon" />
</:increment_trigger>
<:error :let={msg}>
<.heroicon name="hero-exclamation-circle" class="icon" />
{msg}
</:error>
</.number_input>
<.action type="submit" class="button button--accent">
Submit
</.action>
</.form>
def number_input_form_strict_create(conn, %{"number_input_validate" => params}) do
case MyApp.Forms.NumberInputForm.changeset_validate(%MyApp.Forms.NumberInputForm{}, params) do
%Ecto.Changeset{valid?: true} = changeset ->
_data = Ecto.Changeset.apply_changes(changeset)
conn
|> put_flash(:info, "Saved (strict)")
|> redirect(to: ~p"/number-input/form#number-input-validate-form")
changeset ->
changeset = Map.put(changeset, :action, :insert)
validate_form =
Phoenix.Component.to_form(changeset,
as: :number_input_validate,
id: "number-input-validate-form"
)
form =
MyApp.Forms.NumberInputForm.changeset(%MyApp.Forms.NumberInputForm{}, %{})
|> Phoenix.Component.to_form(as: :number_input_changeset, id: "number-input-changeset-form")
render(conn, :number_input_form_page, form: form, validate_form: validate_form)
end
end
defmodule MyApp.Forms.NumberInputForm do
use Ecto.Schema
import Ecto.Changeset
embedded_schema do
field :value, :float
end
def changeset(form, attrs \\ %{}) do
form
|> cast(attrs, [:value])
|> validate_required([:value])
end
def changeset_validate(form, attrs \\ %{}) do
form
|> cast(attrs, [:value])
|> validate_required([:value])
|> validate_number(:value, greater_than_or_equal_to: 1.0, less_than_or_equal_to: 9999.0)
end
end
Native HTML Form
<form
action={~p"/number-input/form"}
method="post"
>
<input type="hidden" name="_csrf_token" value={Plug.CSRFProtection.get_csrf_token()} />
<.number_input name="value" value="1234" class="number-input">
<:label>Value</:label>
<:decrement_trigger>
<.heroicon name="hero-chevron-down" class="icon" />
</:decrement_trigger>
<:increment_trigger>
<.heroicon name="hero-chevron-up" class="icon" />
</:increment_trigger>
</.number_input>
<.action type="submit" class="button button--accent">
Submit
</.action>
</form>
def number_input_form_submit(conn, %{"value" => value}) do
conn
|> put_flash(:info, "Submitted: value=#{value}")
|> redirect(to: ~p"/number-input/form#number-input-form-native")
end