Вы можете создать директиву, которая перехватывает $setSubmitted метод FormController.
Вы можете найти более подробную информацию о методе here
Пожалуйста работается пример here
Когда эта директива перехватывает метод $setSubmitted, мы можем уведомить другую директиву, чтобы показать ошибки проверки в виде bootstrap popover.
Я работаю в следующих предположениях (не стесняйтесь, поправьте меня):
- вы будете использовать тэг формы
- на вашей форме тега вы будете иметь
ng-submit="nameOfForm.$valid && vm.onSubmit()"
решение работает с двумя директивами:
submitNotify и popoverValidation
submitNotify уведомляет popoverValidation, когда форма отправлена, директива popoverValidation затем показывает ошибки формы, если они есть.
Директива 1: submitNotify
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');
};
}
};
})
Объяснение:
- Может быть использован только в качестве директивы атрибута
- Требуется
form тег, или ngForm
Функция ссылка :
Функция связи заменяет функцию $setSubmitted функцией обратного вызова. Функция обратного вызова уведомляет директиву popoverValidation о том, что форма была отправлена.
Директива 2: popoverValidation
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">×</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';
}
}
};
}]);
Объяснение:
- Может быть использован только в качестве директивы атрибута
- Требуется
submitNotify тег на материнской form
по ссылке функция:
- директива
popoverValidation получает уведомление о том, что форма отправлена
- Он проверяет, является ли
ng-model переплетены свойство справедливо
- Если получает отображаться не выписывается на поповер
Полный HTML:
<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>
Некоторые CSS:
<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>
MyFormController
controller('MyFormController', ['$scope', function ($scope) {
var self = this;
$scope.person = {
email:'john.doe.com'
}
self.onSubmit = function() {
console.log('MyFormController.onSubmit');
};
}]);
По моему опыту, 'UIB-popover's не были предназначены для обработки такого динамического контента (например, проверка ошибок). Я пробовал аналогичный подход в проекте, и это не стоило проблем с использованием 'uib-popover'. Вместо этого мы просто использовали css и 'ng-class', чтобы имитировать ощущение popovers. Тогда наши директивы должны были иметь дело только тогда, когда нужно было скрывать/показывать «popovers» на основе нашей формы. – ryanyuyu
См. Мой ответ ниже –