I have set up a validation directive that requires users to check a box. If the checkbox is left unchecked, an error message will be displayed. However, I am facing an issue where the message overlaps with the checkbox text.
https://i.sstatic.net/iTKoo.jpg
I want the validation message to appear after the checkbox text. I specifically need to implement this within the directive without making changes to the controller or template. How can I achieve this?
app.directive('validate', function ($timeout) {
return {
restrict: 'AE',
require: 'ngModel',
link: function (scope, element, attrs, ngModel) {
if (!ngModel){
return;
}
ngModel.$setValidity('validation', false);
scope.directive_function= function(){
alert("directive function");
}
ngModel.$parsers.push(function(val){
if(val==true){
ngModel.$setValidity('validation', true);
var elemento_eliminar=(angular.element((document.getElementById('errorchec' ))));
elemento_eliminar.remove();
}else{
ngModel.$setValidity('validation', false);
var newDirective = angular.element('<div id="errorchec" class="span_wrong" style="margin-top:5px; color:red">'+"must be required"+'</div>');
element.after(newDirective);
}
})
}
};
});