试着考虑如何在角度2中构建多步形式

Question

我正在尝试构建一个小的3步形式.这将类似于:

我做出反应的方式是使用redux来跟踪表单完成并根据步骤编号(0,1,2)呈现表单正文标记.

在角度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将负责用户的表单数据.每次表单输入有效时,用户都可以单击"下一步"执行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>

它仍然是一个小模板,您可以将所有表单和所有数据保存在一个组件中,如果您愿意,可以使用在step1,2,3 -divs和animate上切换css-classes的内容替换ngIf当用户移动到下一步时它们

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