القائمة المنسدلة · النموذج

    <.form
  for={@form}
  action={~p"/select/form"}
  method="post"
>
  <.select
    field={@form[:country]}
    class="select"
    translation={%Corex.Select.Translation{placeholder: "Select a country"}}
    items={Corex.List.new([
      %{label: "France", value: "fra"},
      %{label: "Belgium", value: "bel"},
      %{label: "Germany", value: "deu"},
      %{label: "Netherlands", value: "nld"},
      %{label: "Switzerland", value: "che"},
      %{label: "Austria", value: "aut"}
    ])}
  >
    <:label>Country</:label>
    <:trigger>
      <.heroicon name="hero-chevron-down" class="icon" />
    </:trigger>
    <:error :let={msg}>
      <.heroicon name="hero-exclamation-circle" class="icon" />
      {msg}
    </:error>
  </.select>
  <.action type="submit" class="button button--accent">
    Submit
  </.action>
</.form>

  

    def select_form_page(conn, _params) do
  phoenix_form =
    Phoenix.Component.to_form(%{"country" => ""}, as: :select_phoenix, id: "select-form-phoenix")

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

def select_form_submit(conn, params) do
  if is_map(params["select_phoenix"]) do
    country = params["select_phoenix"]["country"] || ""

    conn
    |> put_flash(:info, "Submitted: country=#{inspect(country)}")
    |> redirect(to: ~p"/select/form#select-form-phoenix")
  end
end

  

    <.form
  for={@form}
  action={~p"/select/form"}
  method="post"
>
  <.select
    field={@form[:country]}
    class="select"
    translation={%Corex.Select.Translation{placeholder: "Select a country"}}
    items={Corex.List.new([
      %{label: "France", value: "fra"},
      %{label: "Belgium", value: "bel"},
      %{label: "Germany", value: "deu"},
      %{label: "Netherlands", value: "nld"},
      %{label: "Switzerland", value: "che"},
      %{label: "Austria", value: "aut"}
    ])}
  >
    <:label>Country</:label>
    <:trigger>
      <.heroicon name="hero-chevron-down" class="icon" />
    </:trigger>
    <:error :let={msg}>
      <.heroicon name="hero-exclamation-circle" class="icon" />
      {msg}
    </:error>
  </.select>
  <.action type="submit" class="button button--accent">
    Submit
  </.action>
</.form>

  

    def form_page(conn, _params) do
  form =
    %MyApp.Forms.CountryForm{}
    |> MyApp.Forms.CountryForm.changeset_validate(%{})
    |> Phoenix.Component.to_form(as: :select_validate, id: "select-validate-form")

  render(conn, :form_page, form: form)
end

  

    defmodule MyApp.Forms.CountryForm do
  use Ecto.Schema
  import Ecto.Changeset

  embedded_schema do
    field :country, :string
  end

  def changeset(form, attrs \\ %{}) do
    form
    |> cast(attrs, [:country])
    |> validate_required([:country])
  end

  def changeset_validate(form, attrs \\ %{}) do
    form
    |> cast(attrs, [:country])
    |> validate_required([:country], message: "can't be blank")
  end
end

  

    <form action={~p"/select/form"} method="post">
  <input type="hidden" name="_csrf_token" value={Plug.CSRFProtection.get_csrf_token()} />
  <.select
    name="user[country]"
    form="select-plain-form"
    class="select"
    translation={%Corex.Select.Translation{placeholder: "Select a country"}}
    items={Corex.List.new([
      %{label: "France", value: "fra"},
      %{label: "Belgium", value: "bel"},
      %{label: "Germany", value: "deu"},
      %{label: "Netherlands", value: "nld"},
      %{label: "Switzerland", value: "che"},
      %{label: "Austria", value: "aut"}
    ])}
  >
    <:label>Country</:label>
    <:trigger>
      <.heroicon name="hero-chevron-down" class="icon" />
    </:trigger>
  </.select>
  <.action type="submit" class="button button--accent">
    Submit
  </.action>
</form>

  

    def select_form_submit(conn, %{"user" => %{"country" => country}}) do
  conn
  |> put_flash(:info, "Submitted: country=#{inspect(country)}")
  |> redirect(to: ~p"/select/form#select-form-native")
end