Forms 如何跨使用FormGroup验证的多个选项卡进行表单验证

我正在开发一个Angular2工作流应用程序，它收集多个选项卡上的数据，根据以前选项卡的值自定义每个选项卡上的字段，然后验证所有选项卡是否正确填写。我使用Angular2路由器来控制显示哪个选项卡组件，每个选项卡使用

FormGroup

来处理表单验证。（有关组件层次结构和应用程序如何工作的可视化概念，请参见下文。）我需要一种优雅的方法来计算工作流中所有选项卡上数据的有效性，而无需打开每个选项卡来激活其控制器和

FormGroup

验证程序。理想情况下，选项卡的工作流验证将使用与选项卡的

FormGroup

验证相同的逻辑，以保持干燥和一致

当用户触摸字段时，我将标签的“脏”状态记录在数据库中，这样我就可以知道标签何时是原始/脏的。问题是，当用户返回到以前保存的工作流时，当用户尚未触摸这些选项卡上的

FormGroup

s时，如何计算所有选项卡数据的有效/无效状态

感谢您对能够实现这一点的设计模式提出的任何建议

一些设计细节：

• 一个路由组件处理工作流的每个步骤
• 每个路由组件使用一个FormGroup来处理表单验证
• 所有选项卡上的表单验证都需要驱动所有工作流步骤的有效/无效指示器，如标题的
• 选项卡可以处于三种可能的状态之一：原始（灰色检查：用户尚未触摸选项卡上的任何字段），不完整（红色感叹号：选项卡已被触摸，选项卡上的一个或多个字段无效），有效（绿色检查：所有必填字段都包含有效值）

---

在解决这个问题的过程中，我发现解决方案需要更高层次的体系结构选择，包括状态管理以及如何处理和显示应用程序的数据。不幸的是，对我来说，没有一个技术解决方案，比如“使用此Angular2库设计专门验证不同组件中多个表单组的字段！”：(

我希望我们的研究能对其他人有所帮助，我的团队正在使用Angular2的npm模块采用Redux方法。应用程序的所有数据和状态处理逻辑（包括跨多个选项卡的验证——我的初始挑战）将由Redux actions&Reducer处理。一个有益的副作用是，我们的视图控制器变得超级简单，只显示ngrx提供给它们的数据。这消除了依赖于在应用程序其他区域输入的数据状态的复杂条件逻辑

Igghead.io有一个介绍ngrx库和设计模式的

---

我希望这能帮你一把。祝你好运！

四年后，我对最初的问题有了更好的答案： 这有一个模块

对于一般的状态管理，我现在使用秋田。我希望我再也不用使用redux了。我想有一些合法的用例需要redux，但是现在在一些项目中使用了ngrx，我可以自信地说：实施和维护非常复杂，对于每一个必须跟上速度的新团队成员来说都是痛苦的

---

这两种工具都是由Netnel（）创建的（或至少是由Netnel（）提供的），因此，他们在状态管理方面有着相同的思维方式也很好。

随着我们对实现的深入，我要说的是：Redux并不是为了装腔作势！它完全改变了您对状态的看法。它包含了大量的新语法和约定。我们将完成我们需要的，最终它将更加简单甘特比我们开始的地方要快。然而，要跟上速度，这是一个陡峭的学习曲线。这绝对不是一个简单的解决方案。谢天谢地，ngrx有很多很好的例子和资源。