angularjs – 如何在角度引导弹出窗口内显示角度形式验证错误？

发布时间：2020-12-17 08:06:01 所属栏目：安全来源：网络整理

导读：我是新的角度js。我想在元素右侧的角度引导弹出窗口中显示窗体错误。我尝试创建指令，当它更改类时，我有一个元素。但我没有想法如何下一步。 (function(angular) { 'use strict';var app=angular.module('formExample',[]) .controller('ExampleController'

我是新的角度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);

我只想显示错误信息

>当用户点击保存按钮(所有表单域错误消息)
>元素的模糊(仅针对失去焦点的元素)

这是我的plnkr，我试图得到的消息。

更新

不知怎的，我展示了角度引导弹出窗口和关闭按钮，关闭popover。

目前plunker有两个问题。

>我想在我的popover模板中显示错误信息
相应于它被打开的元素。我需要这个
因为我需要一个关闭按钮。
>一旦我关闭了popover，如果该字段是空的，用户点击
提交popover下次不打开。我想显示错误
每次提交消息。

如何将您的模板如下所示：

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

工作空档here。

更新：

您可以使用anglejs foreach循环遍历表单中的所有错误，然后从中可以显示您的元素上的popover基础。这样的事情：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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!