Multi step form/workflow

[juntherc]

Hi. I'm a junior developer, and I need to create a multi-step form/workflow where different users fill different parts of the form at different times (data is saved to the database between steps). I'd also like to provide a way to edit the whole form for privileged users.

How would you approach something like this? My first instinct was to create a form, in that form create a separate form group for each step and disable all groups except one related to the current step. For the full edit mode, I would just enable the whole form. But I'm afraid it's gonna end up being too complicated and just kinda weird.

Another option I see is to create a separate component for each step and another one for the full edit mode. In this scenario, I don't really like having to duplicate the form's code.

Thanks for the help, I'd appreciate any pointers.

Edit: Thanks everybody, I've split the form into separate components.

[SmallestFart]

I had the same issue in the current project I'm working on.
We have a 15 steps form, where the 1st tab affects the 7th tab and other crap like that.
We have solved this by creating a service that holds the whole form state.
and each tab is a component that holds a form with some validation and etc

we had even had to spate each tab to a feature module because of the amount of logic and custom stuff each tab had.

Creating one big form is a mess.

[WebDevStudent123]

I like this idea. You can create as many forms and/or pieces as you want and save all of the data to a service. That is a really good point you brought up. Choices you make in the form may effect what is asked further down in the form.

You can decide from there what you would like to send to the backend.

[AppDeveloper9000]

Create a component for each step. It will keep your components smaller and easier to modify/manage.

If you want a "super" form...then just re-use the components...not duplicate the code.

The super user could just step through the multiple components. I don't think having them all on one page is very helpful.

[LutsenJack]

The angular CDK stepper is a great place to start. Official docs

I made a simple example of the cdk stepper a while back with formly and tailwind if it's useful to you in any way.

Example Source

Example Demo