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データメソッドのドキュメントを参照してください） ）。

これを確認するために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 に答える