How to make form in few parts so they are one after another

Question

I'm building angular project and want to realize registration in few parts to be one after another. Registration requires about 10 fields and to look good I want to separate input fields in groups. So, when you enter all fields in first group, by clicking button on bottom first group "disappear" and second group appear, and so on. Of course, at the end all those entered data should be available so it can be checked and sent into database.

Now, I think it could be done with angular animations, but that requires that every group should be in it's own component, or am I wrong? I've tried using ng-bootstrap carousel, but couldn't make it work.

Any new suggestion and help would be very much appreciated.

score 0 · Answer 1 · answered Jan 23 '19 at 23:09

You could do it with routing.

Define a router outlet where you want the registration information to appear. Then route to the first set of questions. On click route to the second set of questions.

With routing, each set of questions would be a separate component.

I did something similar (but with tabs) here: https://github.com/DeborahK/MovieHunter-routing

Here is the example of the route definition:

  {
    path: ':id/edit',
    component: MovieEditComponent,
    children: [
      { path: '', redirectTo: 'info', pathMatch: 'full' },
      { path: 'info', component: MovieEditInfoComponent },
      { path: 'tags', component: MovieEditTagsComponent }
    ]
  }

Here I route into two tabs: info and tags. But you could instead route with just the forms (and no tabs).

How to make form in few parts so they are one after another

1 Answers1