怎么办跨越与FormGroup

我开发一个Angular2工作流应用程序，收集多个选项卡中的数据，根据以前的标签值自定义每个选项卡上的字段，然后验证，所有的标签都验证多个选项卡表单验证沿途正确填写。我使用Angular2路由器来控制显示哪个选项卡组件，每个选项卡使用FormGroup来处理表单验证。（请参阅下面的组件层次结构以及应用程序的工作原理）。我需要一种优雅的方式来计算工作流程中所有选项卡上数据的有效性，而不必打开每个选项卡以激活其控制器和验证程序。理想情况下，选项卡的工作流验证将使用与选项卡FormGroup验证相同的逻辑，以保持干预和一致。怎么办跨越与FormGroup

当用户触摸领域我登录选项卡的“脏”状态的数据库，所以我没有问题，知道什么时候一个标签是原始/脏。面临的挑战是，当用户返回到先前保存的工作流程时，如果用户尚未触摸这些选项卡上的FormGroup，我如何计算所有选项卡数据的有效/无效状态？

谢谢设计模式的任何建议，可以做到这一点！

几个设计细节：

一种途径组件处理工作流程的每个步骤。
每个路由组件使用FormGroup处理表单验证。
所有选项卡上的表单验证需要为所有工作流步骤驱动有效/无效指示符，如标题所示。
甲选项卡可以用在三种可能的状态之一：质朴（灰色检查：用户还没有触摸任何字段的标签上还），不完全（红色惊叹号：标签已经被触摸和一个或该选项卡上的多个字段是无效的），有效（绿色检查：所有必填字段包含有效值

来源

2017-02-17 Matthew Marichiba

在这个问题上的工作，我发现该解决方案需要更高级别关于国家管理的建筑选择a nd如何处理&显示应用程序的数据。不幸的是，对于我来说，没有单一的技术解决方案，比如“专门使用此Angular2库设计来验证不同组件中多个FormGroup的字段！” :(

我希望我们的研究是对别人的帮助，我的团队正在使用NPM模块ngrx-store & ngrx-effects为Angular2，所有的应用程序数据的&状态处理逻辑（包括跨多个验证采取了终极版的方法tabs--我最初的挑战）将由Redux动作& reducer来处理，一个有益的副作用是我们的视图控制器变得非常简单，并且只显示ngrx给出的数据，这样就消除了复杂的条件逻辑，这取决于输入到其他区域的数据状态应用程序

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

我希望这给你一个腿。祝你好运！

来源

2017-03-08 19:48:36

随着我们对实现的深入了解，我会这样说：Redux不是为了嘲笑心脏！这是对你思考国家方式的彻底改革。新的语法和约定很厚实。我们会完成我们所需要的，最终它会比我们开始的地方更优雅。然而，这是一个陡峭的学习曲线，以加快速度。这绝对不是一个洒水解决方案。谢天谢地，ngrx有很好的例子和资源。 –

同意，Redux是要走的路。我记录了我在博客中使用的模式并开放了一个示例应用程序：http://heidloff.net/article/angular-2-form-redux-multiple-routes

来源

2017-08-01 08:51:11

怎么办跨越与FormGroup

回答

相关问题