إدخال الأرقام · النموذج

    <.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

  

    <.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

  

    <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