Jak wyświetlić błąd sprawdzania poprawności kształtu kątowego wewnątrz pop-upu narożnikowego?

Question

Jestem nowy dla kątowego js. Chcę pokazać błąd formy w poplamionym bootstrapie po prawej stronie elementu. Próbowałem utworzyć dyrektywę i dostałem element, gdy zmienia on klasy. Ale nie mam pomysłu, jak przejść dalej.

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

Chcę po prostu pokazać się komunikat o błędzie

1. gdy użytkownik kliknie przycisk Zapisz (wszystkich pól formularza komunikat o błędzie)
2. rozmycie elementu (tylko dla elementu, który jest stracił ostrość)

Oto mój plnkr, który próbowałem dostać wiadomość.

Aktualizacja

Jakoś wyświetlane kątową popover bootstrap i przycisk zamykania, który zamyka popover.

Mam dwie problemy w bieżącym plunker.

1. chcę wyświetlić komunikat o błędzie w moim popover szablonu odpowiedniego do elementu, gdzie jest coraz otwarty. Potrzebuję tego szablonu , ponieważ potrzebuję przycisku zamykania.
2. Po zamknięciu okna popover, jeśli pole jest puste, a użytkownik klika przesyłaj popover, który nie otwiera się następnym razem. Chcę wyświetlać komunikat o błędzie za każdym razem, gdy prześlesz.

Answer 1

Jak o wprowadzenie szablonu tak:

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

Roboczą Plunker here.

UPDATE:

Można użyć angularjs foreach pętli wszystkich błędów w swojej formie, a następnie stamtąd można zobaczyć bazę popover na swoim żywiole. Coś takiego: working plunker

<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

Można tworzyć dyrektywę, która przechwytuje sposobu FormController$setSubmitted.

można znaleźć więcej informacji dotyczących sposobu here

Proszę znaleźć pracy przykład here

Kiedy dyrektywa ta przechwytuje metody $setSubmitted, możemy zawiadomić inną dyrektywę pokazać błędy walidacji w bootstrap popover.

Pracuję w następujących założeń (zapraszam do mnie poprawić):

• będzie używana tag formularz
• na tagu formularza trzeba będzie ng-submit="nameOfForm.$valid && vm.onSubmit()"

rozwiązanie działa z dwiema dyrektywami:

submitNotify i popoverValidation

submitNotify powiadamia popoverValidation po przesłaniu formularza, dyrektywa popoverValidation wyświetla następnie błędy w formularzu, jeśli takie istnieją.

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

Objaśnienie:

• Może być stosowany tylko jako dyrektywa atrybutu
• Wymaga form tag lub ngForm

Funkcja Link :

Funkcja linku zastępuje funkcję $setSubmitted z funkcją zwrotną. Funkcja oddzwaniania powiadamia o tym, że formularz został przesłany.

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

Objaśnienie:

• Może być stosowany tylko jako dyrektywa atrybutu
• Wymaga submitNotify tag na rodzica form

Łącze funkcja:

• Dyrektywa popoverValidation zostaje powiadomiony, że formularz jest składany
• Sprawdza czy zbindowanych Właściwość ng-model jest ważny
• Jeśli zostanie wyświetlona niepoprawna popover

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

Niektóre 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'); 
    }; 
}]);