Question

我是angularjs的新手。尝试使用bootstrap工具提示实现表单验证。如果输入字段无效并获得焦点，则会出现带有工具提示的文本。验证工作正常，即如果输入字段的值无效但工具提示文本未显示，则输入字段变为红色。这是html：

<form role="form" name="form" ng-controller="registerController">
        <div class="col-sm-12">
            <div class="form-group" ng-class="{ 'has-error': form.fullName.$invalid && form.fullName.$touched}">
                <input class="form-control has-feedback" name="fullName" id="fullName"
                       type="text"
                       required
                       ng-model="fullName"
                       tooltip="{{form.fullName.$valid ? '' : 'Full name required'}}"
                       tooltip-trigger="focus"
                       tooltip-placement="top" />
                <span class="glyphicon glyphicon-ok-sign text-success form-control-feedback" aria-hidden="true"
                      ng-show="form.fullName.$valid"></span>
            </div>
        </div>
</form>

有关额外信息，我已经包含以下脚本和css文件：

<script src="../scripts/jquery-2.2.1.min.js"></script>  
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <script src="../scripts/bootstrap.min.js"></script>
    <script src="../scripts/angular.min.js"></script>
    <script src="../scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>

帮助我弄清楚如何才能让它发挥作用。提前谢谢。

Answer 1

如果您使用https://angular-ui.github.io/bootstrap/#/tooltip

您的输入字段应如下所示：

<input class="form-control has-feedback" name="fullName" id="fullName"
                   type="text"
                   required
                   ng-model="fullName"
                   uib-tooltip="Full name required"
                   tooltip-is-open="form.fullName.$invalid"
                   tooltip-trigger="none"
                   tooltip-placement="top" />

您希望通过将内置触发器设置为“none”来删除内置触发器，并根据字段的有效性管理打开工具提示。

如果您没有开始使用工具提示，并且想要一个可扩展且可针对不同错误进行自定义的良好动态验证系统，那么您可能会比看看Angular的消息传递更糟糕：

https://scotch.io/tutorials/angularjs-form-validation-with-ngmessages

在这里：

http://blog.thoughtram.io/angularjs/2015/01/11/exploring-angular-1.3-validators-pipeline.html

angularjs无效的Bootstrap工具提示

1 个答案: