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

Phoenix Forum Questions / Help
, ,
1

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?)

Cheers!

2

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.

4 Likes