来自多个组件的 AngularJS 验证答案

【问题标题】：AngularJS Validation from multiple components来自多个组件的 AngularJS 验证
【发布时间】：2017-11-30 17:33:21
【问题描述】：

我正在开发一个小型 AngularJS (1.6) 应用程序，尝试使用基于组件的架构。

在我的 HomePageComponent 上，我有三个不同的子组件 A、B 和 C，它们都包含不同的内容，例如输入字段、日期选择器和列表。如果我的任何子组件中的验证失败，则应该无法导航到下一页（状态）。因此应该禁用“按钮 A” - 例如。组件 A 中的名称输入字段未设置。

但是，我似乎无法找到合理的解决方案/模式来说明如何在使用组件时实现此功能。

有人对此有适当的解决方案吗？提前致谢

【问题讨论】：

在 HomePageComponent 中，如果你添加了 <form> 嵌套组件中的任何输入和验证都将参与外部表单验证

标签： angularjs angular-ui-router angular-components

【解决方案1】：

您可以考虑使用wizard，例如angular-wizard。来自github页面：

<wizard on-finish="finishedWizard()" on-cancel="cancelledWizard()"> 
    <wz-step wz-title="Starting">
        <h1>This is the first step</h1>
        <p>Here you can use whatever you want. You can use other directives, binding, etc.</p>
        <input type="submit" wz-next value="Continue" />
    </wz-step>
    <wz-step wz-title="Continuing">
        <h1>Continuing</h1>
        <p>You have continued here!</p>
        <input type="submit" wz-next value="Go on" />
    </wz-step>
    <wz-step wz-title="More steps">
        <p>Even more steps!!</p>
        <input type="submit" wz-next value="Finish now" />
    </wz-step>
</wizard>

【讨论】：

谢谢 - 我会调查的。