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

Here are some links that might be helpful:

2 Likes

Thanks, that second link is good. I’ve tried to understand the first one, but it’s broken up in a way that I find confusing.

If anyone has a simple example of dynamic/nested elements within a form, I’m still keen to see it.

Bumping this in regards to Phoenix Liveview 0.16.1

Anyone have any code they can share with a very simple example of the use case I have outlined in my original post here?

Thanks

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:

Hope it helps :heart:

3 Likes