尝试考虑如何在角度2中建立多步骤表格 [英] Trying to think about how to build a multi step form in angular 2

问题描述

我正在尝试构建一个小的3步表单.这将类似于以下内容:

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

我这样做的方式是使用redux跟踪表单完成并根据步骤号(0，1，2)呈现表单主体标记.

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

在角度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?

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

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>

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

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?

推荐答案

不要过度使用它，如果它是一种简单的形式，则无需使用路由器或服务即可在步骤之间传递数据.

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.

类似的事情会做:

<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上切换css类的东西替换ngIf. 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

这篇关于尝试考虑如何在角度2中建立多步骤表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！