How to validate form in live component of modal

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
    <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..." %>
      <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>
      <% end %>

  def handle_event("validate", %{"user" => params}, socket) do
    cset =
      |> User.changeset(params)
      |> Ecto.Changeset.cast_assoc(:users_personal, with: &UserInfo.changeset/2)
      |> Map.put(:action, :update)

    {:noreply, assign(socket, user_changeset: cset)}


Thanks! :smiley:

Have you tried using <.form> syntax? See Phoenix.HTML.Form and Form bindings — Phoenix LiveView v0.17.3

1 Like

Oh, now I get it