如何跨使用 FormGroup 验证的多个选项卡进行表单验证
How to do form validation across multiple tabs that validate with FormGroup
我正在开发一个 Angular2 工作流应用程序，它收集多个选项卡上的数据，根据先前选项卡的值自定义每个选项卡上的字段，然后验证所有选项卡是否都正确填写。我正在使用 Angular2 路由器来控制显示哪个选项卡组件，并且每个选项卡都使用 FormGroup 来处理表单验证。 （有关组件层次结构和应用程序工作方式的直观概念，请参见下文。）我需要一种优雅的方法来计算工作流中所有选项卡的数据有效性，而不必打开每个选项卡来激活其控制器和 FormGroup 验证器。理想情况下，选项卡的工作流验证将使用与选项卡的 FormGroup 验证相同的逻辑，以保持干燥和一致。
当用户触摸字段时，我会在数据库中记录选项卡的 "dirty" 状态，因此我知道选项卡何时为 pristine/dirty 没有问题。挑战在于，当用户 returns 进入 previously-saved 工作流时，当用户尚未触及 [=10] 时，我如何计算所有选项卡数据的 valid/invalid 状态=]在那些选项卡上？
感谢您对可以实现此目的的设计模式提出任何建议！
一些设计细节：
- 一个路由组件处理工作流的每个步骤。
- 每个路由组件都使用一个 FormGroup 来处理表单验证。
- 所有选项卡上的表单验证需要驱动所有工作流步骤的 valid/invalid 指标，如 header 中所示。
- 选项卡可以处于三种可能状态之一：Pristine（灰色勾选：用户尚未触摸选项卡上的任何字段）， Incomplete（红色感叹号：选项卡已被触摸，选项卡上的一个或多个字段无效），Valid（绿色复选：所有必填字段均包含有效值。
在解决这个问题的过程中，我发现解决方案需要关于状态管理以及如何处理和显示应用程序数据的更高级别的架构选择。对我来说不幸的是，没有一个单一的技术解决方案，比如 "Use this Angular2 library design specifically to validate fields across multiple FormGroups in different components!" :(
我希望我们的研究对其他人有帮助，我的团队正在采用 Redux 方法，使用 Angular2 的 npm 模块 ngrx-store & ngrx-effects。应用程序的所有数据和状态处理逻辑（包括跨多个选项卡的验证——我最初的挑战）都将由 Redux 操作和缩减器处理。一个有益的副作用是我们的视图控制器变得超级简单，只显示 ngrx 给它们的数据。这消除了依赖于在应用程序其他区域输入的数据状态的复杂条件逻辑。
Egghead.io 有一个 useful 10 minute video 介绍了 ngrx 库和设计模式。
我希望这能帮到你。祝你好运！
四年后，我对最初的问题有了更好的回答：
有一个模块！ https://www.npmjs.com/package/@ngneat/forms-manager
对于一般的状态管理，我现在使用 Akita，https://datorama.github.io/akita/。我希望我永远不必再使用 redux。我想有一些合法的用例需要 redux，但是现在在一些项目中使用了 ngrx，我可以自信地说：实施和维护非常复杂，并且每个必须跟上速度的新团队成员都很痛苦.
这两种工具都是由 Netanel Basal (https://netbasal.com/) 创建的（或者至少是由 Netanel Basal 做出的重大贡献），因此它们在状态管理方面具有相同的思维方式也很好。
我正在开发一个 Angular2 工作流应用程序，它收集多个选项卡上的数据，根据先前选项卡的值自定义每个选项卡上的字段，然后验证所有选项卡是否都正确填写。我正在使用 Angular2 路由器来控制显示哪个选项卡组件，并且每个选项卡都使用 FormGroup 来处理表单验证。 （有关组件层次结构和应用程序工作方式的直观概念，请参见下文。）我需要一种优雅的方法来计算工作流中所有选项卡的数据有效性，而不必打开每个选项卡来激活其控制器和 FormGroup 验证器。理想情况下，选项卡的工作流验证将使用与选项卡的 FormGroup 验证相同的逻辑，以保持干燥和一致。
当用户触摸字段时，我会在数据库中记录选项卡的 "dirty" 状态，因此我知道选项卡何时为 pristine/dirty 没有问题。挑战在于，当用户 returns 进入 previously-saved 工作流时，当用户尚未触及 [=10] 时，我如何计算所有选项卡数据的 valid/invalid 状态=]在那些选项卡上？
感谢您对可以实现此目的的设计模式提出任何建议！
一些设计细节：
- 一个路由组件处理工作流的每个步骤。
- 每个路由组件都使用一个 FormGroup 来处理表单验证。
- 所有选项卡上的表单验证需要驱动所有工作流步骤的 valid/invalid 指标，如 header 中所示。
- 选项卡可以处于三种可能状态之一：Pristine（灰色勾选：用户尚未触摸选项卡上的任何字段）， Incomplete（红色感叹号：选项卡已被触摸，选项卡上的一个或多个字段无效），Valid（绿色复选：所有必填字段均包含有效值。
在解决这个问题的过程中，我发现解决方案需要关于状态管理以及如何处理和显示应用程序数据的更高级别的架构选择。对我来说不幸的是，没有一个单一的技术解决方案，比如 "Use this Angular2 library design specifically to validate fields across multiple FormGroups in different components!" :(
我希望我们的研究对其他人有帮助，我的团队正在采用 Redux 方法，使用 Angular2 的 npm 模块 ngrx-store & ngrx-effects。应用程序的所有数据和状态处理逻辑（包括跨多个选项卡的验证——我最初的挑战）都将由 Redux 操作和缩减器处理。一个有益的副作用是我们的视图控制器变得超级简单，只显示 ngrx 给它们的数据。这消除了依赖于在应用程序其他区域输入的数据状态的复杂条件逻辑。
Egghead.io 有一个 useful 10 minute video 介绍了 ngrx 库和设计模式。
我希望这能帮到你。祝你好运！
四年后，我对最初的问题有了更好的回答： 有一个模块！ https://www.npmjs.com/package/@ngneat/forms-manager
对于一般的状态管理，我现在使用 Akita，https://datorama.github.io/akita/。我希望我永远不必再使用 redux。我想有一些合法的用例需要 redux，但是现在在一些项目中使用了 ngrx，我可以自信地说：实施和维护非常复杂，并且每个必须跟上速度的新团队成员都很痛苦.
这两种工具都是由 Netanel Basal (https://netbasal.com/) 创建的（或者至少是由 Netanel Basal 做出的重大贡献），因此它们在状态管理方面具有相同的思维方式也很好。