Signature · النموذج
Phoenix
<.form
for={@form}
action={~p"/signature-pad/form"}
method="post"
>
<.signature_pad field={@form[:signature]} class="signature-pad">
<:label>Sign here</:label>
<:clear_trigger>
<.heroicon name="hero-x-mark" />
</:clear_trigger>
<:error :let={msg}>
<.heroicon name="hero-exclamation-circle" class="icon" />
{msg}
</:error>
</.signature_pad>
<.action type="submit" class="button button--accent">
Submit
</.action>
</.form>
def signature_form_page(conn, _params) do
phoenix_form =
Phoenix.Component.to_form(%{"signature" => ""}, as: :signature_phoenix, id: "signature-form-phoenix")
render(conn, :signature_form_page, phoenix_form: phoenix_form)
end
def signature_form_submit(conn, params) do
if is_map(params["signature_phoenix"]) do
signature = params["signature_phoenix"]["signature"] || ""
conn
|> put_flash(:info, "Submitted: signature saved")
|> redirect(to: ~p"/signature-pad/form#signature-form-phoenix")
end
end
نموذج Phoenix (changeset)
<.form
for={@form}
action={~p"/signature-pad/form"}
method="post"
>
<input type="hidden" name="signature_ecto[_sent]" value="1" />
<.signature_pad field={@form[:signature]} class="signature-pad">
<:label>Sign here</:label>
<:clear_trigger>
<.heroicon name="hero-x-mark" />
</:clear_trigger>
<:error :let={msg}>
<.heroicon name="hero-exclamation-circle" class="icon" />
{msg}
</:error>
</.signature_pad>
<.action type="submit" class="button button--accent">
Submit
</.action>
</.form>
def signature_form_page(conn, _params) do
ecto_form =
%MyApp.Forms.SignatureForm{}
|> MyApp.Forms.SignatureForm.changeset_validate(%{})
|> Phoenix.Component.to_form(as: :signature_ecto, id: "signature-form-ecto")
render(conn, :signature_form_page, ecto_form: ecto_form)
end
def signature_form_submit(conn, params) do
if is_map(params["signature_ecto"]) do
case MyApp.Forms.SignatureForm.changeset_validate(%MyApp.Forms.SignatureForm{}, params["signature_ecto"]) do
%Ecto.Changeset{valid?: true} = changeset ->
_data = Ecto.Changeset.apply_changes(changeset)
conn
|> put_flash(:info, "Submitted: signature saved")
|> redirect(to: ~p"/signature-pad/form#signature-form-ecto")
changeset ->
changeset = Map.put(changeset, :action, :insert)
ecto_form = Phoenix.Component.to_form(changeset, as: :signature_ecto, id: "signature-form-ecto")
render(conn, :signature_form_page, ecto_form: ecto_form)
end
end
end
defmodule MyApp.Forms.SignatureForm do
use Ecto.Schema
import Ecto.Changeset
embedded_schema do
field :signature, :string
end
def changeset(form, attrs \\ %{}) do
form
|> cast(attrs, [:signature])
|> validate_required([:signature])
end
def changeset_validate(form, attrs \\ %{}) do
form
|> cast(attrs, [:signature])
|> validate_required([:signature], message: "can't be blank")
end
end
Native HTML Form
<form action={~p"/signature-pad/form"} method="post">
<input type="hidden" name="_csrf_token" value={Plug.CSRFProtection.get_csrf_token()} />
<.signature_pad name="user[signature]" class="signature-pad">
<:label>Sign here</:label>
<:clear_trigger>
<.heroicon name="hero-x-mark" />
</:clear_trigger>
</.signature_pad>
<.action type="submit" class="button button--accent">
Submit
</.action>
</form>
def signature_form_submit(conn, %{"user" => %{"signature" => sig}}) do
conn
|> put_flash(:info, "Submitted: signature=#{preview_sig(sig)}")
|> redirect(to: ~p"/signature-pad/form#signature-form-native")
end
defp preview_sig(""), do: "(empty)"
defp preview_sig(sig), do: sig