Greetings! I have a simple modal in the live component for users to change email. I have a problem - I cannot validate this form in modal like I did it without modal and live component. Here is my code:
defmodule MyAppWeb.ModalLive do
use MyAppWeb, :live_component
alias MyAppWeb.{User, UserInfo}
def render(assigns) do
~H"""
<div id={"#{@id}"}>
<%= form_for @user_changeset, "#",
[phx_change: :validate, phx_submit: :save, phx_hook: "SavedForm"], fn f-> %>
<div x-data="{ open: false }">
<button class="px-4 py-2 bg-gray-400 hover:bg-gray-700 text-white text-xl font-serif rounded-full border-none focus:outline-none" @click="open = true">Change Email</button>
<div class="fixed z-1 w-full h-full top-0 left-0 flex items-center justify-center" x-cloak x-show="open">
<div class="fixed w-full h-full bg-gray-500 opacity-50"></div>
<div class="relative z-2 w-3/12 bg-white p-8 mx-auto rounded-xl flex flex-col items-center" @click.away="open = false">
<div class="text-xl font-serif pb-4">
<%= label f, :email %>
<%= text_input f, :email, phx_debounce: "blur" %>
<%= error_tag f, :email %>
<%= submit "Save", phx_disable_with: "Saving..." %>
</div>
<button class="px-4 py-2 bg-red-400 hover:bg-red-700 text-white text-xl font-serif rounded-full border-none focus:outline-none"
@click="open = false">Close Modal</button>
</div>
</div>
</div>
<div>
</div>
<% end %>
</div>
"""
end
def handle_event("validate", %{"user" => params}, socket) do
cset =
socket.assigns.user
|> User.changeset(params)
|> Ecto.Changeset.cast_assoc(:users_personal, with: &UserInfo.changeset/2)
|> Map.put(:action, :update)
{:noreply, assign(socket, user_changeset: cset)}
end
end
Thanks!