Angular ui-select2 指令不适用于 AngularJS 验证答案

【问题标题】：Angular ui-select2 directive doesn't work with AngularJS ValidationAngular ui-select2 指令不适用于 AngularJS 验证
【发布时间】：2013-03-02 03:14:35
【问题描述】：

我搜索了互联网，试图弄清楚为什么使用 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
  };    
}

【问题讨论】：

标签： angularjs directive jquery-select2

【解决方案1】：

我认为 select2 指令在 ngModel 和 select2 插件之间传递值的方式存在问题。

简而言之，当没有选择标签时，UI 的 select2 指令将 set the model to []（空数组），因为这是 select2 插件在空多选输入时返回的默认值（参见 the docs for select2 数据方法）

我将在 Github 上发布一个问题来确认这一点，但同时这里是 a workaround：

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

【讨论】：

有解决方法吗？我试图让这个项目的验证尽可能简单
Stewie 非常感谢你。我希望我能点赞 10 次
嗯，你的感激之情至少值得 10 个赞。

【解决方案2】：

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

【讨论】：