BarelyFunctional

BarelyFunctional

Idiomatic LiveView dynamic/nested forms

I’m starting to build a multi-step/page ‘wizard’ form, but from these forums and web tutorials, struggling to find the idiomatic way to build a dynamic form.

The simplest use case is:

  1. User clicks or presses Enter to choose an option from a select,
  2. Depending on the option another form element is displayed eg another select or radio buttons or a text field.
  3. Some steps/pages will have forms that have 3-5 elements, each depending on the previous one.

I know this is one of the most basic use cases for LiveView, but I’m struggling to find a simple example.

Can anyone please point to one in these forums or in an online tutorial or put an example up below?

Thanks

Most Liked

f0rest8

f0rest8

The good news is that there is very little to do to update my older blog post mentioned above to 0.16.1:

And making the update further cleans up the code a bit (:blush:).

You can follow the changelog guide and reference the live view docs as well. After the update, you can totally get rid of the templates/person_registration and just render it all in your live view with that wonderful ~H.

Here’s a new updated post with the changes:

https://coretheory.medium.com/how-to-part-2-revised-swap-registration-flow-to-a-live-view-with-phx-gen-auth-multi-step-47172904b00a?sk=50ebdd6e8e66cb278a2c40a0c3db415a

Hope it helps :heart:

APB9785

APB9785

Creator of ECSx

Here are some links that might be helpful:

https://medium.com/swlh/how-to-part-2-swap-registration-flow-to-a-live-view-with-phx-gen-auth-multi-step-form-25371540fce1

Where Next?

Popular in Questions Top

hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" => #BSON.ObjectId<58eb1a7a9ad169198c3dXXXX>, "email" => ...
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
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
vrod
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors: [WARN] - (starship::utils): Executing command ...
New

Other popular topics Top

rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
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
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
274 42716 114
New

We're in Beta

About us Mission Statement