AngularJS来自多个组件的验证

Question

我正在开发一个小型AngularJS（1.6）应用，试图使用基于组件的架构。

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

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

有没有人有适当的解决方案呢？ 提前致谢

Answer 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>