如何在 angular bootstrap popover内显示角度表单验证错误？
如何在 angular bootstrap popover内显示角度表单验证错误？
提问于 2018-05-04 00:17:44
我想在元素右侧的角引导弹窗中显示表单错误。我试图创建该指令，并且当它改变类时我得到了一个元素。但我不知道下一步如何移动。代码：
(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);
回答 2
Stack Overflow用户
发布于 2018-05-04 09:05:25
你可以使用angularjs foreach循环表单中的所有错误，然后从那里你可以在你的元素上显示弹出窗口。代码：
<script type="text/javascript">
var app=angular.module('testApp', ['ngAnimate', 'ngSanitize'], function($httpProvider) {});
app.controller("PopoverDemoCtrl", function($scope, $http, $window) {
$scope.validate = function() {
var _popover;
var error = $scope.testForm.$error;
angular.forEach(error.required, function(field){
var message = 'This field (' + field.$name + ') is required';
_popover = $('#' + field.$name).popover({
trigger: 'manual',
title: '<span class="text-info"><strong>title</strong></span>'+
'<button type="button" id="close" class="close" onclick="$("#' + field.$name + '").popover("hide");">×</button>',
content: message,
html: true
});
return $('#' + field.$name).popover("show")
});
};
});
</script>
Stack Overflow用户
发布于 2018-05-04 10:05:09
在这里可以找到工作示例。
当此指令截取该$setSubmitted方法时，我们可以通知另一个指令在引导弹出窗口中显示验证错误。
我在以下假设下工作：
- 你将使用表单标签
- 在你的表单标签上你会有
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';
}
}
};
}]);
说明：
- 只能用作属性指令
链接功能：
- 该
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');
};
}]);
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100008356
复制相关文章
相似问题