Angular Bootstrap UI标签ngMessage在第一个标签中不起作用

Question

I bumped into a strange behaviour of ngMessage 我碰到了ngMessage的奇怪行为

into an angular ui bootstrap tabs the validation 进入有角度的ui引导标签，进行验证

doesn't work in the first tab 在第一个标签中不起作用

the code 编码

js js

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

html 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 http://codepen.io/whisher/pen/QEyyzz

Is it a bug ? 是虫子吗？

Any idea ? 任何想法？

UPDATE 更新

I worked it out in the real app I've set an input with the same name ^^ 我在真实的应用程序中解决了这个问题，我设置了一个具有相同名称的输入^^

Answer 1

Do you really need two form tags? 您是否真的需要两个表单标签？ As every form tag has it own validation. 由于每个表单标签都有自己的验证。 So if you want 1 validation for whole tab control then you will need to put just one form tag 因此，如果您想对整个选项卡控件进行1次验证，则只需放置一个表单标签

Answer 2

Your <form> has same names. 您的<form>具有相同的名称。 So if You change first to name1 and second to name2 all will work fine. 因此，如果您首先将其更改为name1 ，然后将其更改为name2一切正常。

You can read more about angular form validation here 您可以在此处阅读更多有关角度形式验证的信息

Angular Bootstrap UI标签ngMessage在第一个标签中不起作用

问题描述

UPDATE 更新

2 个解决方案

解决方案1
1 2016-06-09 09:19:04

解决方案2
-1 已采纳 2016-06-09 09:19:05

Angular Bootstrap UI标签ngMessage在第一个标签中不起作用

问题描述

UPDATE 更新

2 个解决方案

解决方案1 1 2016-06-09 09:19:04

解决方案2 -1 已采纳 2016-06-09 09:19:05

解决方案1
1 2016-06-09 09:19:04

解决方案2
-1 已采纳 2016-06-09 09:19:05