floatfoo

floatfoo

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
    ~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! :smiley:

Marked As Solved

APB9785

APB9785

Creator of ECSx

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

Where Next?

Popular in Questions Top

sergio
In Ruby, I can go: User.find_by(email: "foobar@email.com").update(email: "hello@email.com") How can I do something similar in Elixir? ...
New
Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
New
fireproofsocks
I’m working on defining a simple Ecto schema for a table (in PostGres), but I don’t see where I can define a column as NOT NULL. Conside...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New
dotdotdotPaul
Okay, I’m having a heck of a time trying to figure out how to best handle the validation of belongs_to associations in Ecto. I’m sure I’...
New
yawaramin
In the Dialyzer docs ( dialyzer — OTP 29.0.2 (dialyzer 6.0.1) ), there is a way to turn off a specific warning for a function: -dialyzer...
New

Other popular topics Top

Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
gausby
I asked this very same question on twitter and got some interesting feedback, but I thought it would be a good question to ask here as we...
1207 39523 209
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
RisingFromAshes
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
klo
Got a question about when to concat vs. prepending items to list then reversing to achieve appending. So i know lists boil down to [1 | ...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New

We're in Beta

About us Mission Statement