Trying to think about how to build a multi step form in angular 2

Question

I am trying to build a small, 3 step form. It would be something similar to this:

The way I did this in react was by using redux to track form completion and rendering the form body markup based on the step number (0, 1, 2).

In angular 2, what would be a good way to do this? Here's what I am attempting at the moment, and I'm still working on it. Is my approach fine? Is there a better way to do it?

I have a parent component <app-form> and I will be nesting inside it <app-form-header> and <app-form-body>.

<app-form>
  <app-header [step]="step"></app-header>
  <app-body [formData]="formData"></app-body>
</app-form>

In <app-form> component I have a step: number and formData: Array<FormData>. The step is just a index for each object in formData. This will be passed down to the header. formData will be responsible the form data from user. Each time the form input is valid, user can click Next to execute nextStep() to increment the index. Each step has an associated template markup.

Is there a better way to do something like this?

Answer 1

don't overdo it, if it is a simple form you don't need to use the router or a service to pass data between the steps.

something like this will do:

<div class="nav">
</div>

<div id="step1" *ngIf="step === 1">
<form></form>
</div>

<div id="step2" *ngIf="step === 2">
<form></form>
</div>

<div id="step3" *ngIf="step === 3">
<form></form>
</div>

It's still a small template, and you kan keep all of the form and all the data in one component, and if you want to you can replace the ngIf with something that switches css-classes on the step1,2,3 -divs and animate them as the user moves to the next step

Answer 2

If you want to keep things extensible, you could try something like this:

<sign-up>
  <create-account 
    [model]="model" 
    [hidden]="model.createAccount.finished">
  </create-account>
  <social-profiles 
    [model]="model" 
    [hidden]="model.socialProfiles.finished">
  </social-profiles>
  <personal-details 
    [model]="model" 
    [hidden]="model.personalDetails.finished">
  </personal-details>
 </sign-up>

 export class SignUpVm {
   createAccount: CreateAccountVm; //Contains your fields & finished bool
   socialProfiles: SocialProfilesVm; //Contains your fields & finished bool
   personalDetails: PersonalDetailsVm; //Contains your fields & finished bool
   //Store index here if you want, although I don't think you need it
 }

 @Component({})
 export class SignUp {
   model = new SignUpVm(); //from sign_up_vm.ts (e.g)
 }

 //Copy this for personalDetails & createAccount
 @Component({})
 export class SocialProfiles {
   @Input() model: SignUpVm;
 }