Show/Hide Modal Forms without roundtrip to server while preserving live validation

Hi elixir forum,

I’m new to elixir and phoenix. I’m currently checking out Live View and have come across the following problem:

I want to have a modal form which performs live validation but I want to show and hide the modal without having to make a roundtrip to the server (as I think I should not be using live view for something that is not data-oriented, like displaying a form).

However, when I try to display the modal using JS , it gets patched (as expected) and hidden whenever an event happens in the LV.

What would be the correct approach here? My takes:

  1. Use phx-update=“ignore”. Cons: I lose live validation as any child elements of the modal (ie. the form) will get ignored.
  2. Use a live view for the form inside a dead view, show modal with JS. Cons: I lose live navigation
  3. Use a live view for the form inside a live view for the page, while also using phx-update=ignore. (Will this even work?)


I wouldn’t worry too much about the round-trip for controlling modal form state. Given you are using live validation you will have plenty of round-trips happening already and one more (very small one to toggle a class) to keep your programming model sane sounds like a pretty reasonable trade-off to me.

FWIW - The generators included with the latest Phoenix & LiveView do a server round-trip specifically for this case, so it certainly appears to be good practice to the core team.