angularjs - Ui 路由器嵌套 View : how to validate a shared form?

Question

Available plunker here

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

嵌套 View :

$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'
    });

我在每个嵌套 View 中都有一个必需的输入:

form-step1.html:

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

form-step2.html:

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

在这个嵌套 View 中(我的向导的最后一步)我还有提交按钮，如果表单无效则禁用:

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

好吧，验证对于这个 View 的输入工作正常，但它没有记住前一个 View 的输入 (form-step1.html)。由于所有 View 的表单都相同，因此我希望输入 requrired1 也应该得到验证。但是，尽管输入 requrired1 为空，但该表单被认为是有效的。

所以，我的问题是:我如何验证一个表单，同时牢记所有嵌套 View 的输入？

在此先感谢您的帮助。

Answer 1

好吧，在考虑了一会儿之后，我认为这里最简单的选择是分别验证每个表单步骤(嵌套 View )。

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

更新的 form-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 .