您可以创建一个指令来拦截FormController 的$setSubmitted 方法。
你可以找到更多关于方法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';
}
}
};
}]);
说明：
- 只能用作属性指令
- 需要父
form 上的 submitNotify 标签
链接功能：
-
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>
我的表单控制器
controller('MyFormController', ['$scope', function ($scope) {
var self = this;
$scope.person = {
email:'john.doe.com'
}
self.onSubmit = function () {
console.log('MyFormController.onSubmit');
};
}]);