3

可用的 plunker在这里

我正在使用角度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>

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

所以，我的问题是：如何验证表单并牢记所有嵌套视图的输入？

在此先感谢您的帮助。

4

1 回答 1

2

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

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

更新了 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 。

于 2015-11-14T11:50:16.683 回答