Директива Angular ui-select2 не работает с проверкой AngularJS

Я обыскал Интернет, пытаясь понять, почему проприетарная проверка AngularJS не работает при использовании jQuery.Select2 и директивы ui-select2 - это ошибка ??

Редактировать: хорошо, я обнаружил, что это происходит только с тегами ввода, мои раскрывающиеся списки «Выбрать» и ввод текста работают нормально.

Вот скрипт 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 jquery-select2 directive
person iamwhitebox    schedule 02.03.2013    source источник

Ответы (2)


arrow_upward
18
arrow_downward

Я считаю, что есть проблема в том, как директива select2 передает значение между плагином ngModel и select2.

Короче говоря, когда теги не выбраны, директива 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 = '';
    }
  });
}

Or you could use this custom 'required-multiple' directive which will take empty array into consideration when validating the model:

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);
      });
    }
  };
});
person Stewie    schedule 02.03.2013
comment
есть обходной путь? Я пытаюсь максимально упростить проверку этого проекта. - person iamwhitebox; 02.03.2013
comment
Стьюи, большое спасибо. Хотел бы я поставить палец вверх 10 раз - person iamwhitebox; 04.03.2013
comment
Что ж, ваша благодарность стоит как минимум 10 лайков. - person Stewie; 04.03.2013

arrow_upward
0
arrow_downward

Для тегов решение, которое я использовал для этой проблемы, — это установка ng-minlength="1" на входе. Кажется, работает достаточно хорошо.

person cgwyllie    schedule 11.11.2013