<.form
for={@form}
phx-change="validate_validate"
phx-submit="save_validate"
>
<.color_picker
name={@form[:color].name}
value={@color}
label="Color"
on_value_change="color_changed_validate"
class="color-picker"
/>
<.color_form_errors form={@form} />
<.action type="submit" class="button button--accent">
Submit
</.action>
</.form>
defmodule MyAppWeb.ColorPickerFormLive do
use MyAppWeb, :live_view
def mount(_params, _session, socket) do
ecto_form =
%MyApp.Form.ColorPickerForm{}
|> MyApp.Form.ColorPickerForm.changeset_validate(%{})
|> Phoenix.Component.to_form(as: :color_picker_ecto, id: "color-picker-live-form-ecto")
{:ok, assign(socket, :ecto_form, ecto_form)}
end
def handle_event("validate", %{"color_picker_ecto" => params}, socket) do
changeset =
%MyApp.Form.ColorPickerForm{}
|> MyApp.Form.ColorPickerForm.changeset_validate(params)
|> Map.put(:action, :validate)
{:noreply,
assign(
socket,
:ecto_form,
Phoenix.Component.to_form(changeset,
action: :validate,
as: :color_picker_ecto,
id: "color-picker-live-form-ecto"
)
)}
end
def handle_event("save", %{"color_picker_ecto" => params}, socket) do
case MyApp.Form.ColorPickerForm.changeset_validate(%MyApp.Form.ColorPickerForm{}, params) do
%Ecto.Changeset{valid?: true} = changeset ->
_data = Ecto.Changeset.apply_changes(changeset)
{:noreply,
assign(
socket,
:ecto_form,
Phoenix.Component.to_form(
MyApp.Form.ColorPickerForm.changeset_validate(%MyApp.Form.ColorPickerForm{}, params),
as: :color_picker_ecto,
id: "color-picker-live-form-ecto"
)
)}
changeset ->
{:noreply,
assign(
socket,
:ecto_form,
Phoenix.Component.to_form(changeset,
action: :insert,
as: :color_picker_ecto,
id: "color-picker-live-form-ecto"
)
)}
end
end
end
defmodule MyApp.Form.ColorPickerForm do
use Ecto.Schema
import Ecto.Changeset
embedded_schema do
field :color, :string, default: "#3b82f6"
end
def changeset(form, attrs \\ %{}) do
form
|> cast(attrs, [:color])
|> validate_required([:color])
end
def changeset_validate(form, attrs \\ %{}) do
form
|> cast(attrs, [:color])
|> validate_required([:color])
|> validate_alpha_max_50()
end
defp validate_alpha_max_50(changeset) do
with value when is_binary(value) <- get_field(changeset, :color),
[_, alpha] <-
Regex.run(~r/rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*([\d.]+)\s*\)/, value),
{float_val, _} <- Float.parse(alpha),
true <- float_val > 0.5 do
add_error(changeset, :color, "maximum alpha allowed is 50%")
else
_ -> changeset
end
end
end