Angularjs 如何在angular bootstrap popover中显示angular form验证错误？

我是新手。我想在元素右侧的angular bootstrap popover中显示表单错误。我试图创建该指令，当它更改类时，我得到了一个元素。但我不知道下一步该怎么走

(function(angular) {
  'use strict';
var app=angular.module('formExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.master = {};

    $scope.update = function(user) {
      $scope.master = angular.copy(user);
    };

    $scope.reset = function(form) {
      if (form) {
        form.$setPristine();
        form.$setUntouched();
      }
      $scope.user = angular.copy($scope.master);
    };

    $scope.reset();
  }]);
app.directive("alert", function(){
    return {
        restrict: 'C',
        priority: -1000,
        link: function(scope, ele, attrs, ctrl){
          scope.$watch(function() {console.log(ele.attr('class')); })
          if (ctrl) {
            console.log("applying custom behaviour to input: ", ele.attr('id'));
            // ... awesomeness here
          }
        }
    };
});
})(window.angular);

我只想显示错误消息

用户单击“保存”按钮时（所有表单字段错误消息）

元素模糊（仅适用于失去焦点的元素）

这是我的信，我试着要传达这个信息

更新

不知何故，我显示了角引导弹出框和关闭按钮，关闭弹出框

目前我有两个问题

我想在我的popover模板中显示错误消息 与要打开的元素相对应。我需要这个 模板，因为我需要一个关闭按钮

一旦我关闭了popover，如果字段为空并且用户单击 提交popover下次不会打开。我想显示错误 每次提交时都会发送消息

---

这样放置模板怎么样：

<script type="text/ng-template" id="myPopoverTemplate.html">
  <div class="gmePopover">
    <div class="popover-header">
      <button type="button" class="close" popover-toggle><span aria-hidden="true">&times;</span></button>
    </div>
    <div class="popover-content">
        somecontent
    </div>
  </div>
</script>

&时代；
一些内容

正在工作的普朗克

更新：

您可以使用angularjs foreach循环检查表单中的所有错误，然后从那里可以显示基于元素的popover。大概是这样的：

<script type="text/ng-template" id="myPopoverTemplate.html">
  <div class="gmePopover">
    <div class="popover-header">
      <button type="button" class="close" popover-toggle><span aria-hidden="true">&times;</span></button>
    </div>
    <div class="popover-content">
        somecontent
    </div>
  </div>
</script>

var app=angular.module（'testApp'，['ngAnimate'，'ngSanitize']，函数（$httpProvider）{}）；
controller（“PopoverDemoCtrl”，函数（$scope，$http，$window）{
$scope.validate=函数（）{
var_popover；
var error=$scope.testForm.$error；
角度.forEach（error.required，函数（字段）{
var message='此字段（'+字段。$name+'）是必需的'；
_popover=$（“#”+字段.$name）.popover({
触发器：“手动”，
标题：“标题”+
“×；”，
内容:信息,，
html：对
});
返回$（'#'+字段.$name）.popover（“显示”）
});
};
});

您可以创建一个指令来截取

FormController

的

$setSubmitted

方法

您可以找到有关该方法的更多信息

请找到工作示例

当此指令截获

$setSubmitted

方法时，我们可以通知另一个指令以显示验证错误

我在以下假设下工作（请随意更正）：

• 您将使用一个表单标记
• 在表单标签上有

  ng submit=“nameOfForm.$valid&&vm.onSubmit（）”

该解决方案使用两个指令：

submitNotify

和

povervalidation

submitNotify

通知

poovervalidation

提交表单时，

poovervalidation

指令会显示表单错误（如果有）

指令1:

submitNotify

说明：

• 只能用作属性指令
• 需要

  form

  标签，或

  ngForm

链接功能： link函数用回调函数替换

$setSubmitted

函数。回调函数通知

popoverValidation

指令表单已提交

指令2:

poovervalidation

一些CSS：

---

我需要与父元素对应的popover内容。我不知道我更新的plunker和你的有什么区别。区别：我把myPopoverTemplate.html放在一个ng模板中。我不知道你所说的分别到父元素是什么意思。一个简化的例子会对我们有所帮助。好的，例如，在给定的柱塞中，首先考虑TabBOX是用户名和第二个文本框密码。如果用户单击“提交”按钮，但未输入任何值（即两个文本框均为空），则我们必须在第一个弹出窗口中显示“请输入用户名”，在第二个弹出窗口中，我们必须显示“请输入密码”……是否有办法找到已打开弹出窗口的元素。当我打印错误对象时，如果元素与特定模式不匹配，那么对于同一个元素，我将得到两个错误对象。在这种情况下，我必须停止元素打开另一个popover。也就是说，所需的不仅是验证。未测试，而且我相信您需要$yourElement.data（）['bs.popover'].tip（）.hasClass（'In'）。根据我的经验，如果popover是可见的，则返回true，

uib popover

s不是为处理此类动态内容而设计的（比如错误验证）。我在一个项目中尝试了类似的方法，结果不值得麻烦地使用

uib popover

。相反，我们只是使用css和

ng类来模拟popover的感觉。然后我们的指令只需处理何时隐藏/显示“popover”根据我们的表格。请看下面我的答案…我没有完全通过。但我只是进入了plunker，输入了正确的电子邮件地址。错误仍然没有消失。
directive('submitNotify', function () {
    return {
        restrict: 'A',
        require: 'form',
        controller: function SubmitNotify() { },
        link: function (scope, element, attrs, form) {                
            var $setSubmitted = form.$setSubmitted;
            form.$setSubmitted = function () {
                $setSubmitted.bind(form)();
                scope.$broadcast('onSubmitNotify');
            };
        }
    };
})

directive('popoverValidation', [function () {
    return {
        restrict: 'A',
        require: ['ngModel', '^submitNotify'],
        link: function (scope, element, attrs, require) {
            scope.$on('onSubmitNotify', function () {
                var ngModel = require[0];
                if (!ngModel.$valid) {
                    showPopover(ngModel.$error);
                }
            });

            function showPopover( $error) {
                var options = {
                    content: getValidationErrorsHtml($error),
                    html: true,
                    template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content popover-content-errors"></div></div>',
                    title: '<span class="text-info"><strong>Error</strong></span><button type="button" data-dismiss="popover" class="close">&times;</button>',
                    trigger: 'manual'
                }
                $(element).popover(options);
                $(element).on('shown.bs.popover', hidePopover);
                $(element).popover('show');                    
            }

            function hidePopover() {
                $(this).next('.popover').find('button[data-dismiss="popover"]').click(function (e) {
                    $(element).popover('hide');
                });
            }

            function getValidationErrorsHtml($error) {
                var errors = [];

                if ($error.required) {
                    errors.push(requiredErrorMessage());
                }

                if ($error.email) {
                    errors.push(invalidEmailAddress());
                }

                var errorHtml = '<ul class="list-group">';

                for (var i = 0; i < errors.length; i++) {
                    errorHtml += '<li class="list-group-item">' + errors[i] + '</li>';
                }

                errorHtml += '</ul>';

                return errorHtml;
            }

            function requiredErrorMessage() {
                return 'This field is required';
            }

            function invalidEmailAddress() {
                return 'Please enter a valid email address';
            }
        }
    };
}]);

<form name="myForm" ng-controller="MyFormController as vm" ng-submit="myForm.$valid && vm.onSubmit()" submit-notify="" novalidate>
    <div class="panel panel-primary">
        <div class="panel-heading">Form Validation with Popovers</div>
        <div class="panel-body">
            <div class="form-group">
                <label>First name</label>
                <input type="text" name="firstName" class="form-control" required ng-model="person.firstName" popover-validation="" />
            </div>
            <div class="form-group">
                <label>Surname</label>
                <input type="text" name="surname" class="form-control" required ng-model="person.surname" popover-validation="" />
            </div>
            <div class="form-group">
                <label>Email</label>
                <input type="email" name="email" class="form-control" ng-model="person.email" popover-validation="" />
            </div>
        </div>
        <div class="panel-footer">
            <button type="submit" class="btn btn-success">Submit</button>
        </div>
    </div>
</form>

<style type="text/css">
    .popover-content-errors {
        padding:0px;
    }

    .popover-content-errors .list-group {
        margin-bottom:0px
    }

    .popover-content-errors .list-group-item {
        border-left:none;
        white-space:nowrap;
    }

    .popover-content-errors .list-group-item:first-child {
        border-top:none;
    }

    .popover-content-errors .list-group-item:last-child {
        border-bottom:none;
    }
</style>

controller('MyFormController', ['$scope', function ($scope) {
    var self = this;
    $scope.person = {
        email:'john.doe.com'
    }
    self.onSubmit = function () {   
        console.log('MyFormController.onSubmit');
    };
}]);