Angular bootstrap ui 选项卡 ngMessage 在第一个选项卡中不起作用

Question

我遇到了 ngMessage 的奇怪行为

进入angularuibootstrap标签验证

在第一个选项卡中不起作用

代码

js

angular
        .module('app', ['ngMessages','ui.bootstrap'])
        .controller('MainCtrl', MainCtrl);
        function MainCtrl() {}

html

<body class="container" ng-app="app" ng-controller="MainCtrl as main">
        <uib-tabset active="0" justified="true">
            <uib-tab index="0">
                <uib-tab-heading>
                  <ul class="header">
                    <li class="title">title 1</li>
                    <li class="description">Descr 1</li>
                  </ul>
                </uib-tab-heading>
                <div class="tab-pane-general">
                   <form name="form" novalidate>
                        <div class="form-group" ng-class="{ 'has-error': form.location.$touched && form.location.$invalid }">
                            <label>Name</label>
                            <input type="text" name="location" class="form-control" 
                                ng-model="main.location"
                                ng-minlength="5"
                                ng-maxlength="10"
                                required>
                            <div class="help-block" ng-messages="form.location.$error" ng-show="form.location.$touched">
                                <div class="alert alert-danger" role="alert">
                                    <p ng-message="minlength">Your name is too short.</p>
                                    <p ng-message="maxlength">Your name is too long.</p>
                                    <p ng-message="required">Your name is required.</p>
                                </div>
                            </div>         
                        </div>
                    </form>
                </div>
            </uib-tab>
            <uib-tab index="1">
                <uib-tab-heading>
                  <ul class="header">
                    <li class="title">title 2</li>
                    <li class="description">Descr 2</li>
                  </ul>
                </uib-tab-heading>
                <div class="tab-pane-general">
                    <form name="form" novalidate>
                        <div class="form-group" ng-class="{ 'has-error': form.location.$touched && form.location.$invalid }">
                            <label>Name</label>
                            <input type="text" name="location" class="form-control" 
                                ng-model="main.location"
                                ng-minlength="5"
                                ng-maxlength="10"
                                required>
                            <div class="help-block" ng-messages="form.location.$error" ng-show="form.location.$touched">
                                <div class="alert alert-danger" role="alert">
                                    <p ng-message="minlength">Your name is too short.</p>
                                    <p ng-message="maxlength">Your name is too long.</p>
                                    <p ng-message="required">Your name is required.</p>
                                </div>
                            </div>         
                        </div>
                    </form>
                </div><!--/tab-pane-general -->
            </uib-tab>
            <uib-tab index="2">
                <uib-tab-heading>
                  <ul class="header">
                    <li class="title">title 3</li>
                    <li class="description">Descr 3</li>
                  </ul>
                </uib-tab-heading>
                <div class="tab-pane-general">
                    TAB THREE
                </div><!--/tab-pane-general -->
            </uib-tab>
        </uib-tabset>
</body>

http://codepen.io/whisher/pen/QEyyzz

这是一个错误吗？

有什么想法吗？

更新

我在真实的应用程序中解决了我设置了一个同名的输入^^

Answer 1

你真的需要两个表单标签吗？因为每个表单标签都有自己的验证。因此，如果您想要对整个选项卡控件进行 1 次验证，那么您只需要放置一个表单标签

Answer 2

你们的 <form> 同名。因此，如果您首先更改为 name1，然后更改为 name2，一切都会正常进行。

您可以阅读有关 angular 表单验证的更多信息 here

Angular bootstrap ui 选项卡 ngMessage 在第一个选项卡中不起作用

Angular bootstrap ui tabs ngMessage doesn't work in the first tab

angularjs

angular-ui-bootstrap

ng-messages

更新