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

Question

我正在开发一个Angular2工作流程应用程序，该应用程序收集多个选项卡上的数据，根据先前选项卡的值自定义每个选项卡上的字段，然后验证所有选项卡在此过程中是否正确填写。我正在使用Angular2路由器来控制显示哪个选项卡组件，每个选项卡使用FormGroup来处理表单验证。 （请参阅下面的组件层次结构和应用程序的工作原理。）我需要一种优雅的方法来计算工作流中所有选项卡的数据有效性，而无需打开每个选项卡来激活其控制器和{{1}验证者。理想情况下，选项卡的工作流验证将使用与选项卡FormGroup验证相同的逻辑，以保持DRY和一致性。

当用户触摸字段时，我在数据库中记录选项卡的“脏”状态，因此我不知道选项卡何时是原始/脏的。面临的挑战是，当用户返回之前保存的工作流程时，如果用户尚未触及这些选项卡上的FormGroup，如何计算所有选项卡数据的有效/无效状态？< / p>

感谢您对可以实现此目的的设计模式的任何建议！

一些设计细节：

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

Answer 1

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

我希望我们的研究对其他人有帮助，我的团队正在使用针对Angular2的npm模块ngrx-store & ngrx-effects采用Redux方法。所有应用程序的数据和状态处理逻辑（包括跨多个选项卡的验证 - 我的初始挑战）将由Redux操作＆amp;减速。一个有益的副作用是我们的视图控制器变得非常简单，只显示ngrx给出的数据。这消除了复杂的条件逻辑，这取决于在应用程序的其他区域中输入的数据状态。

Egghead.io有一个useful 10 minute video，它引入了ngrx库和＆amp;设计模式。

我希望这能让你站稳脚跟。祝你好运！

Answer 2

四年后，我对最初的问题有了更好的答案： 有一个模块！ https://www.npmjs.com/package/@ngneat/forms-manager

对于一般的状态管理，我现在使用 Akita，https://datorama.github.io/akita/。我希望我永远不必再使用 redux。我想有一些合法的用例需要 redux，但是现在已经在一些项目中使用了 ngrx，我可以自信地说：实施和维护非常复杂，每个新团队成员都必须跟上进度.

这两种工具均由 Netanel Basal (https://netbasal.com/) 创建（或至少由其大量贡献），因此它们在状态管理方面拥有相同的思维方式也很好。