angularjs - ¿Cómo mostrar el error de validación de forma angular dentro de la ventana emergente de bootstrap angular?

popover angular-bootstrap

Question

Soy nuevo en angular js. Quiero mostrar el error de formulario en la ventana emergente de bootstrap angular en el lado derecho del elemento. Intenté crear la directiva y obtuve un elemento cuando cambia las clases. Pero no tengo una idea de cómo moverme a continuación.

(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);

Solo quiero mostrar el mensaje de error

1. cuando el usuario hace clic en el botón Guardar (mensaje de error de todos los campos del formulario)
2. desenfoque de un elemento (solo para el elemento que ha perdido el foco)

Aquí está mi plnkr que intenté obtener el mensaje.

Actualizar

De alguna manera, mostré el botón emergente y el botón de cierre angular que cierra el menú emergente.

Tengo dos problemas en el plunker actual.

1. Quiero mostrar el mensaje de error dentro de mi plantilla emergente correspondiente al elemento donde se abre. Necesito esta plantilla porque necesito un botón de cierre.
2. Una vez que cerré la ventana emergente si el campo está vacío y el usuario hace clic en enviar, la ventana emergente no se abrirá la próxima vez. Quiero mostrar un mensaje de error cada vez que se envíe.

Answer 1

¿Qué hay de poner su plantilla de esta manera:

<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>

Trabajando Plunker here .

ACTUALIZAR:

Puede usar angularjs foreach para recorrer todos los errores en su formulario, y desde allí puede mostrar la base emergente en su elemento. Algo así: here

<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="$(&quot;#'' + field.$name + ''&quot;).popover(&quot;hide&quot;);">&times;</button>'',
              content: message,
              html: true
            });

            return $(''#'' + field.$name).popover("show")
        });
    };
  });
</script>

Answer 2

Puede crear una directiva que intercepte el método $setSubmitted del FormController .

Puedes encontrar más información sobre el método here

Por favor encuentre el ejemplo de trabajo here

Cuando esta directiva intercepta el método $setSubmitted , podemos notificar a otra directiva para mostrar los errores de validación en una ventana emergente de arranque .

Estoy trabajando bajo los siguientes supuestos (siéntase libre de corregirme):

• estarás usando una etiqueta de formulario
• en su etiqueta de formulario tendrá ng-submit="nameOfForm.$valid && vm.onSubmit()"

La solución funciona con dos directivas:

submitNotify y popoverValidation

submitNotify notifica popoverValidation cuando se popoverValidation el formulario, la directiva popoverValidation luego muestra los errores de formulario si hay alguno.

Directiva 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'');
            };
        }
    };
})

Explicación:

• Solo se puede utilizar como una directiva de atributos
• Requiere una etiqueta de form , o ngForm

La función de enlace:

La función de enlace reemplaza la función $setSubmitted con una función de devolución de llamada. La función de devolución de llamada notifica a la directiva popoverValidation que el formulario se ha enviado.

Directiva 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">&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'';
            }
        }
    };
}]);

Explicación:

• Solo se puede utilizar como una directiva de atributos
• Requiere una etiqueta submitNotify en el form padre

La función de enlace:

• La directiva popoverValidation recibe una notificación de que el formulario se envía
• Comprueba si la propiedad enlazada ng-model es válida
• Si no es válido se muestra una ventana emergente

HTML completo:

<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>

Algunos 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'');
    };
}]);