如何在角度自舉popover內顯示角度表單驗證錯誤？

Question

我是新來的角js。我想在元素右側的角引導彈窗中顯示錶單錯誤。我試圖創建該指令，並且在它改變類時我得到了一個元素。但我不知道下一步如何移動。

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

我只想顯示錯誤消息

1. 當用戶點擊保存按鈕（所有表單字段的錯誤消息）
2. 模糊的元件（僅適用於是元件的失去了重點）

這是我的plnkr，我試圖得到的消息。

更新

不知何故我顯示的角度引導酥料餅和關閉按鈕封閉所述酥料餅。

我在目前的plunker有兩個問題。

1. 我想在我的彈出模板 中顯示與它打開的元素相關的錯誤消息。我需要這個 模板，因爲我需要關閉按鈕。
2. 一旦我關閉了彈出窗口，如果該字段爲空並且用戶單擊 提交彈出窗口下次不打開。我想每次提交時都顯示錯誤 消息。

Answer 1

如何把你的模板是這樣的：

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

工作Plunker here。

UPDATE：

您可以使用angularjs的foreach循環遍歷表單中的所有錯誤，然後從那裏你能證明你的元素在酥料餅的基礎。事情是這樣的：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

您可以創建攔截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">&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'; 
      } 
     } 
    }; 
}]); 

說明：

• 只能作爲一個屬性指令
• 要求父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> 

MyFormController

controller('MyFormController', ['$scope', function ($scope) { 
    var self = this; 
    $scope.person = { 
     email:'john.doe.com' 
    } 
    self.onSubmit = function() { 
     console.log('MyFormController.onSubmit'); 
    }; 
}]);