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

    <.form
  for={@form}
  action={~p"/pin-input/form"}
  method="post"
>
  <.pin_input field={@form[:pin]} count={4} class="pin-input">
    <:label>Code</:label>
  </.pin_input>
  <.action type="submit" class="button button--accent">
    Submit
  </.action>
</.form>

  

    def pin_input_form_page(conn, _params) do
  phoenix_form =
    Phoenix.Component.to_form(%{"pin" => []}, as: :pin_phoenix, id: "pin-input-form-phoenix")

  render(conn, :pin_input_form_page, phoenix_form: phoenix_form)
end

def pin_input_form_submit(conn, %{"pin_phoenix" => %{"pin" => pin}}) do
  conn
  |> put_flash(:info, "Submitted: pin=#{inspect(List.wrap(pin))}")
  |> redirect(to: ~p"/pin-input/form#pin-input-form-phoenix")
end

  

    <.form
  for={@form}
  action={~p"/pin-input/form"}
  method="post"
>
  <.pin_input field={@form[:pin]} count={4} class="pin-input">
    <:label>Code</:label>
    <:error :let={msg}>
      <.heroicon name="hero-exclamation-circle" class="icon" />
      {msg}
    </:error>
  </.pin_input>
  <.action type="submit" class="button button--accent">
    Submit
  </.action>
</.form>

  

    def pin_input_form_page(conn, _params) do
  ecto_form =
    %MyApp.Form.PinInputForm{}
    |> MyApp.Form.PinInputForm.changeset_validate(%{})
    |> Phoenix.Component.to_form(as: :pin_ecto, id: "pin-input-form-ecto")

  render(conn, :pin_input_form_page, ecto_form: ecto_form)
end

def pin_input_form_submit(conn, params) do
  if is_map(params["pin_ecto"]) do
    case MyApp.Form.PinInputForm.changeset_validate(%MyApp.Form.PinInputForm{}, params["pin_ecto"]) do
      %Ecto.Changeset{valid?: true} = changeset ->
        data = Ecto.Changeset.apply_changes(changeset)

        conn
        |> put_flash(:info, "Submitted: pin=#{inspect(data.pin)}")
        |> redirect(to: ~p"/pin-input/form#pin-input-form-ecto")

      changeset ->
        changeset = Map.put(changeset, :action, :validate)
        ecto_form = Phoenix.Component.to_form(changeset, as: :pin_ecto, id: "pin-input-form-ecto")
        render(conn, :pin_input_form_page, ecto_form: ecto_form)
    end
  end
end

  

    defmodule MyApp.Form.PinInputForm do
  use Ecto.Schema
  import Ecto.Changeset

  embedded_schema do
    field :pin, {:array, :string}
  end

  def changeset_validate(form, attrs \\ %{}) do
    form
    |> cast(attrs, [:pin])
    |> validate_required([:pin], message: "can't be blank")
    |> validate_length(:pin, is: 4, message: "must be 4 digits")
  end
end

  

    <form action={~p"/pin-input/form"} method="post">
  <input type="hidden" name="_csrf_token" value={Plug.CSRFProtection.get_csrf_token()} />
  <.pin_input name="pin_input[pin]" count={4} class="pin-input">
    <:label>Code</:label>
  </.pin_input>
  <.action type="submit" class="button button--accent">
    Submit
  </.action>
</form>

  

    def pin_input_form_submit(conn, %{"pin_input" => %{"pin" => pin}}) do
  conn
  |> put_flash(:info, "Submitted: pin=#{inspect(List.wrap(pin))}")
  |> redirect(to: ~p"/pin-input/form#pin-input-form-native")
end