1

我搜索了互联网，试图弄清楚为什么使用 jQuery.Select2 和ui-select2指令时专有的 AngularJS 验证不起作用 - 这是一个错误吗？

编辑：好的，我发现这只是标记输入，我的选择下拉菜单和文本输入工作正常。

这是小提琴 http://jsfiddle.net/whiteb0x/ftEHu/

html:

  <form name="myForm" ng-controller="Ctrl">
    userType: <input ui-select2="version1" class="input-xlarge" type="hidden" name="input" ng-model="userType" required>
    <span class="error" ng-show="myForm.input.$error.required">Required</span><br>
    <tt>userType = {{userType}}</tt><br>
    <tt>myForm.input.$valid = {{myForm.input.$valid}} wtf???????!!!</tt><br>
    <tt>myForm.input.$error = {{myForm.input.$error}} huh????</tt><br>
    <tt>myForm.$valid = {{myForm.$valid}} | please hand me a gun :)</tt><br>
    <tt>myForm.$error.REQUIRED = {{!!myForm.$error.REQUIRED}}</tt><br>
   </form>

Javascript：

var app = angular.module('myApp', ['ui.directives']);

function Ctrl($scope) {
  $scope.userType = '';
  $scope.version1 = {
      tags : null
  };    
}
4

2 回答 2

18

我相信 select2 指令如何在 ngModel 和 select2 插件之间传递值存在问题。

简而言之，当没有选择标签时，UI 的 select2 指令会将模型设置为 []（空数组），因为这是 select2 插件在空多选输入上返回的默认值（请参阅select2 Data 方法的文档)

我将在 Github 上发布一个问题来确认这一点，但同时这里有一个解决方法：

function Ctrl($scope) {
  $scope.userType = null;
  $scope.version1 = {
      tags : null
  };

  $scope.$watch('userType', function(userType){
    if(angular.isArray(userType) && userType.length === 0){
      $scope.userType = '';
    }
  });
}

或者你可以使用这个自定义的“required-multiple”指令，它在验证模型时会考虑空数组：

app.directive('requiredMultiple', function() {
  function isEmpty(value) {
    return angular.isUndefined(value) || (angular.isArray(value) && value.length === 0) || value === '' || value === null || value !== value;
  }

  return {
    require: '?ngModel',
    link: function(scope, elm, attr, ctrl) {
      if (!ctrl) return;
      attr.required = true; // force truthy in case we are on non input element

      var validator = function(value) {
        if (attr.required && (isEmpty(value) || value === false)) {
          ctrl.$setValidity('required', false);
          return;
        } else {
          ctrl.$setValidity('required', true);
          return value;
        }
      };

      ctrl.$formatters.push(validator);
      ctrl.$parsers.unshift(validator);

      attr.$observe('required', function() {
        validator(ctrl.$viewValue);
      });
    }
  };
});
于 2013-03-02T09:08:50.790 回答
0

对于标记，我一直在使用的解决方案是ng-minlength="1"在输入上进行设置。似乎工作得很好。

于 2013-11-11T10:54:05.933 回答