각도 ui-select2 지시문이 AngularJS 유효성 검사와 함께 작동하지 않습니다.

Question

jQuery.Select2 및 ui-select2 지시문을 사용할 때 독점 AngularJS 유효성 검사가 작동하지 않는 이유를 알아 내려고 인터넷을 조사했습니다.

편집 : 확인 나는 이것이 발생하고 있음을 태그 지정하는 것, 내 선택 드롭 다운 및 텍스트 입력이 정상적으로 작동하고 있음을 발견했습니다.

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

자바 스크립트 :

다음은 바이올린을 http://jsfiddle.net/whiteb0x/ftEHu/

html로의

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

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

Answer 1

내가 어떻게 선택 2 지침 ngModel 및 선택 2 플러그인 사이의 값을 통과에 문제가 믿습니다 . 그 빈 다중 선택 입력에 플러그인 선택 2에 의해 반환되는 기본값입니다 때문에 UI의 선택 2 지시어 것이다 set the model to [] (빈 배열)를 선택에는 태그가 없을 때 간단히 말해서

,

( 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 = ''; 
    } 
    }); 
} 

또는 당신이 사용자 정의 '필요 - 여러'디를 사용할 수 있습니다 모델의 유효성을 검사 할 때 고려 하늘의 배열을 할 rective : 태그에 대한

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

Answer 2

,이 문제에 대한 내가 사용했던 솔루션은 입력에 ng-minlength="1"을 설정하는 것입니다. 충분히 잘 작동하는 것 같습니다.