尝试思考如何在angular 2中构建多步骤表单

Question

我正在尝试建立一个小的，3步的形式。它将类似于以下内容：

​

​

我在react中这样做的方式是使用redux来跟踪表单完成，并基于步骤号(0，1，2)呈现表单正文标记。

在angular 2中，有什么好方法可以做到这一点？这是我目前正在尝试的，而且我仍在努力。我的方法可以吗？有没有更好的方法呢？

我有一个父组件<app-form>，我将在其中嵌套<app-form-header>和<app-form-body>。

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

在<app-form>组件中，我有一个step: number和一个formData: Array<FormData>。该步骤只是formData中每个对象的索引。这将向下传递到标头。formData将负责来自用户的表单数据。每次表单输入有效时，用户都可以单击Next执行nextStep()以递增索引。每个步骤都有一个关联的模板标记。

有没有更好的方法来做这样的事情？

Answer 1

如果它是一个简单的表单，那么您不需要使用路由器或服务在步骤之间传递数据。

下面这样的代码就可以了：

<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>

它仍然是一个小模板，您可以将所有表单和所有数据保存在一个组件中，如果您愿意，您可以用在步骤1、2、3 -divs上切换css- ngIf并在用户移动到下一步时对其进行动画处理的内容来替换css类

Answer 2

如果你想保持东西的可扩展性，你可以尝试这样做：

<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;
 }