Ui 路由器嵌套视图：如何验证共享表单？

Question

Available plunker here

我正在使用 angular ui-router 嵌套视图来实现多步骤表单（一种向导），但我在尝试验证表单时遇到了麻烦。该表单在所有嵌套视图中共享，但似乎验证只影响放置提交按钮的嵌套视图。

嵌套视图：

$stateProvider
    .state('form', {
        url: '/form',
        templateUrl: 'form.html',
        controller: 'formController'
    })

    .state('form.step1', {
        url: '/step1',
        templateUrl: 'form-step1.html'
    })

    .state('form.step2', {
        url: '/step2',
        templateUrl: 'form-step2.html'
    });

我在每个嵌套视图中都有一个必需的输入：

形式-step1.html:

<input type="text" name="required1" ng-model="formData.required1" required>

形式-step2.html:

<input type="text" name="required2" ng-model="formData.required2" required>

在这个嵌套视图中（我的向导的最后一步）我还有提交按钮，如果表单无效则禁用：

<button ng-disabled="form.$invalid" ng-submit="submit">Submit</button>

好吧，对于这个视图的输入验证工作正常，但它没有记住前一个视图的输入（表单-step1.html）。由于所有视图的表单都相同，我希望输入 requrired1 也应该得到验证。然而，虽然输入 requrired1 为空，但表单被认为是有效的。

所以，我的问题是：如何在记住所有嵌套视图的输入的情况下验证表单？

在此先感谢您的帮助。

Answer 1

好吧，在考虑了一段时间之后，我认为这里最简单的选择是分别验证每个表单步骤（嵌套视图）。

所以，直到表单对一个确定的嵌套视图有效（form-step1），按钮继续下一步（form-step2 ) 显示已禁用。如果我们这样做，当我们到达最后一个嵌套视图（form-step2 在 OP 案例中，它包含提交按钮），我们已经验证了所有以前的表单 -脚步。所以，我们只需要验证当前嵌套视图的表单，以保证整个表单有效。

更新形式-step1.html:

<div>
    <label for="required1">Required 1</label>
    <input type="text" name="required1" ng-model="formData.required1" required>
</div>

<div>
    <button ng-disabled="form.$invalid" ui-sref="form.step2" type="button">Next</button>
</div>

更新了 plunker here。

Ui 路由器嵌套视图：如何验证共享表单？

Ui router nested views: how to validate a shared form?

forms

validation

angularjs

nested-views

angular-ui-router