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

问题描述

可用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'
}）; 
  

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

form-step1.html：

 < input type =textname =required1ng-model =formData.required1required> 
  

form-step2.html： $ b

 < input type =textname =required2ng-model =formData.required2required> 
  

在这个嵌套视图中（我的向导的las步骤）我也有submit按钮，该表单无效：

 < button ng-disabled =form。$ invalidng-submit =submit >提交< /按钮> 
  

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

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

感谢您提供帮助。 解决方案

好了，在想了一会儿之后，我认为最简单的选择是单独验证每个表单步骤（嵌套视图）。因此，直到表单对于确定的嵌套视图有效（ form-step1 ），按钮才会继续执行下一步（ ）。 em> form-step2 ）显示为禁用。
如果我们这样做，当我们到达最后一个嵌套视图（OP案例中的 form-step2 ，其中包含submit按钮）时，我们已经验证了所有先前的表单-脚步。所以，我们只需要验证当前嵌套视图的表单，以确保整个表单有效。

更新了form-step1.html ：

 < div> 
< label for =required1>必需1< / label> 
< input type =textname =required1ng-model =formData.required1required> 
< / div> 
 
< div> 
< button ng-disabled =form。$ invalidui-sref =form.step2type =button> Next< / button> 
< / div> 
  

更新过的邮件这里。

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 newsted 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 las 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 is 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屋！