Ui 路由器嵌套视图:如何验证共享表单? [英] Ui router nested views: how to validate a shared form?

问题描述

<块引用>

可用的 plunker 此处

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

嵌套视图:

$stateProvider.state('表格', {网址:'/表格'，templateUrl: 'form.html',控制器:'formController'}).state('form.step1', {网址:'/step1'，templateUrl: 'form-step1.html'}).state('form.step2', {网址:'/step2'，templateUrl: 'form-step2.html'});

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

form-step1.html:

form-step2.html:

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

提交

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

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

预先感谢您的帮助.

解决方案

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

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

更新了 form-step1.html:

<label for="required1">Required 1</label><input type="text" name="required1" ng-model="formData.required1" required>
<div><button ng-disabled="form.$invalid" ui-sref="form.step2" type="button">下一步</button>

更新了 plunker 此处.

Available plunker here

I'm using angular ui-router nested views to implement a multi-step form (a kind of wizard) and I having troubles trying to validate the form. The form is shared in all nested views, but it seems to be that the validation only affects the nested view where the submit button is placed.

Nested views:

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

I have one required input in each nested 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>

In this nested view (the last step of my wizard) I also have the submit button, disabled if the form is not valid:

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

Well, validation is working fine for the input of this view, but it's not keeping in mind the input of the previous view (form-step1.html). Since the form is the same for all views, I expect that input requrired1 should be also validated. However, although the input requrired1 is empty, the form is considered valid.

So, my question is: How could I validate a form keeping in mind the inputs of all nested views?

Thanks in advance for the help.

解决方案

Well, after being thinking a while about this, I think the easiest choice here is to validate each form step (nested view) individually.

So, until the form is valid for a determinated nested view (form-step1), the button to continue to the next step (form-step2) is showing disabled. If we do in this way, when we arrive to the last nested view (form-step2 in the OP case, wich contains the submit button), we have already validated all the previous form-steps. So, we just need to validate the form for the current nested view to guarantee that the whole form is valid.

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

Updated plunker here.

这篇关于Ui 路由器嵌套视图:如何验证共享表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！