Native Input · Form

    <.form
  for={@form}
  id="native-input-live-form-phoenix"
  phx-submit="save_phoenix"
  class="flex flex-col gap-6 w-full max-w-md"
>
  <.form_full_fields variant={:ecto} id_prefix="native-input-live-phoenix" f={@form} />
  <.action type="submit" id="native-input-live-form-phoenix-submit" class="button button--accent">
    Submit
  </.action>
</.form>

  

    defmodule MyAppWeb.NativeInputFormLive do
  use MyAppWeb, :live_view

  def mount(_params, _session, socket) do
    phoenix_form =
      Phoenix.Component.to_form(MyAppWeb.Demos.NativeInputDemo.phoenix_form_defaults(),
        as: :profile_phoenix,
        id: "native-input-live-form-phoenix"
      )

    {:ok, assign(socket, :phoenix_form, phoenix_form)}
  end

  def handle_event("save_phoenix", %{"profile_phoenix" => profile}, socket) do
    message = "Submitted: #{MyApp.Forms.NativeInputProfile.format_for_toast(profile)}"

    {:noreply,
     assign(
       socket,
       :phoenix_form,
       Phoenix.Component.to_form(profile, as: :profile_phoenix, id: "native-input-live-form-phoenix")
     )
     |> put_flash(:info, message)}
  end
end

  

    <.form
  for={@form}
  id="native-input-live-form-ecto"
  phx-change="validate"
  phx-submit="save"
>
  <.form_full_fields variant={:ecto} id_prefix="native-input-live" f={@form} />
  <.action type="submit" id="native-input-live-submit" class="button button--accent">
    Submit
  </.action>
</.form>

  

    defmodule MyAppWeb.NativeInputFormLive do
  use MyAppWeb, :live_view

  def mount(_params, _session, socket) do
    ecto_form =
      %MyApp.Forms.NativeInputProfile{}
      |> MyApp.Forms.NativeInputProfile.changeset_validate(%{})
      |> Phoenix.Component.to_form(as: :profile_ecto, id: "native-input-live-form-ecto")

    {:ok, assign(socket, :ecto_form, ecto_form)}
  end

  def handle_event("validate", %{"profile_ecto" => params}, socket) do
    changeset =
      %MyApp.Forms.NativeInputProfile{}
      |> MyApp.Forms.NativeInputProfile.changeset_validate(params)
      |> Map.put(:action, :validate)

    {:noreply,
     assign(
       socket,
       :ecto_form,
       Phoenix.Component.to_form(changeset,
         action: :validate,
         as: :profile_ecto,
         id: "native-input-live-form-ecto"
       )
     )}
  end

  def handle_event("save", %{"profile_ecto" => params}, socket) do
    case MyApp.Forms.NativeInputProfile.changeset_validate(%MyApp.Forms.NativeInputProfile{}, params) do
      %Ecto.Changeset{valid?: true} = changeset ->
        _data = Ecto.Changeset.apply_changes(changeset)

        {:noreply,
         assign(
           socket,
           :ecto_form,
           Phoenix.Component.to_form(
             MyApp.Forms.NativeInputProfile.changeset_validate(%MyApp.Forms.NativeInputProfile{}, params),
             as: :profile_ecto,
             id: "native-input-live-form-ecto"
           )
         )}

      changeset ->
        {:noreply,
         assign(
           socket,
           :ecto_form,
           Phoenix.Component.to_form(changeset,
             action: :insert,
             as: :profile_ecto,
             id: "native-input-live-form-ecto"
           )
         )}
    end
  end
end

  

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

  embedded_schema do
    field :name, :string
    field :email, :string
    field :bio, :string
    field :birth_date, :string
    field :datetime, :string
    field :reminder_time, :string
    field :month, :string
    field :week, :string
    field :website, :string
    field :phone, :string
    field :q, :string
    field :color, :string
    field :count, :integer
    field :password, :string
    field :role, :string
    field :tags, {:array, :string}, default: []
    field :size, :string
    field :agree, :boolean, default: false
  end

  def changeset(profile, attrs \\ %{}) do
    profile
    |> cast(attrs, [:name, :email, :bio, :birth_date, :datetime, :reminder_time, :month, :week, :website, :phone, :q, :color, :count, :password, :role, :tags, :size, :agree])
    |> validate_required([:name, :email, :agree])
    |> validate_acceptance(:agree)
  end

  def changeset_validate(profile, attrs \\ %{}) do
    profile
    |> cast(attrs, [:name, :email, :bio, :birth_date, :datetime, :reminder_time, :month, :week, :website, :phone, :q, :color, :count, :password, :role, :tags, :size, :agree])
    |> validate_required([:name, :email, :bio, :birth_date, :datetime, :reminder_time, :month, :week, :website, :phone, :q, :color, :count, :password, :role, :tags, :size, :agree], message: "can't be blank")
    |> validate_format(:email, ~r/@/, message: "must look like an email address")
    |> validate_length(:bio, min: 3, message: "must be at least 3 characters")
    |> validate_length(:password, min: 6, message: "must be at least 6 characters")
    |> validate_format(:website, ~r/^https?:\\/\\//, message: "must start with http:// or https://")
    |> validate_number(:count, greater_than: 0, less_than: 99, message: "must be between 1 and 98")
    |> validate_change(:tags, fn :tags, tags ->
      if is_list(tags) and tags != [], do: [], else: [tags: "can't be blank"]
    end)
    |> validate_acceptance(:agree, message: "must be accepted to continue")
  end
end