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

可用的打捞器

我正在使用angular

UIRouter

嵌套视图来实现一个多步骤表单（一种向导），我在尝试验证表单时遇到了问题。表单在所有嵌套视图中共享，但验证似乎只影响放置“提交”按钮的嵌套视图

嵌套视图：

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

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

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

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

form-step1.html:

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

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

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

form-step2.html:

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

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

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

在此嵌套视图（向导的最后一步）中，我还有“提交”按钮，该按钮在表单无效时被禁用：

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

提交

好的，对于这个视图的输入来说，验证工作正常，但是它没有记住上一个视图（form-step1.html）的输入。由于表单对于所有视图都是相同的，因此我希望还应该验证input Required1。但是，尽管输入REQUIRRED1为空，表单仍被视为有效

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

---

提前感谢您的帮助。

嗯，在考虑了一会儿之后，我认为这里最简单的选择是分别验证每个表单步骤（嵌套视图）

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

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

必需的1
下一个

更新了plunker