angularJS valdr + ui-выберите проверку

Question

Меня гуглили по этому вопросу, но я все еще не могу найти правильное обсуждение по этому вопросу. Мы используем valdr и ui select в форме (приложение angularJS), и мы столкнулись с проблемой, заключающейся в том, что входные данные, которые отображает ui-select, не получат атрибут имени, и с этого момента angular выдает ошибку:

Error: Form element with ID "undefined" is not bound to a field name.
at d.link (http://localhost:8080/bower_components/valdr/valdr.min.js:1:8414)
at invokeLinkFn (http://localhost:8080/bower_components/angular/angular.js:8141:9)
at nodeLinkFn (http://localhost:8080/bower_components/angular/angular.js:7653:11)
at compositeLinkFn (http://localhost:8080/bower_components/angular/angular.js:7009:13)
at nodeLinkFn (http://localhost:8080/bower_components/angular/angular.js:7648:24)
at http://localhost:8080/bower_components/angular/angular.js:7884:13
at processQueue (http://localhost:8080/bower_components/angular/angular.js:13071:27)
at http://localhost:8080/bower_components/angular/angular.js:13087:27
at Scope.$get.Scope.$eval (http://localhost:8080/bower_components/angular/angular.js:14287:28)
at Scope.$get.Scope.$digest (http://localhost:8080/bower_components/angular/angular.js:14103:31) <input type="text" autocomplete="off" tabindex="-1" aria-expanded="true" aria-label="{{ $select.baseTitle }}" aria-owns="ui-select-choices-{{ $select.generatedId }}" aria-activedescendant="ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}" class="form-control ui-select-search ng-pristine ng-untouched ng-valid" placeholder="{{$select.placeholder}}" ng-model="$select.search" ng-show="$select.searchEnabled &amp;&amp; $select.open">

Таким образом, мы попробовали некоторые хаки в директиве ui-select, такие как templateCache переписать / изменить, скрытые входные данные с той же моделью, но результат тот же.

Кстати, перезапись templateCache - наихудший подход, поскольку эта директива используется во всех приложениях другими директивами, и мы не можем взломать все приложение.

Кто-нибудь сталкивался с этой проблемой?

Фрагмент кода: http://plnkr.co/edit/sDNDDtnhi7Jxi9mtjDTl?p=preview

Answer 1

Если name атрибут отсутствует на элементе ввода valdr выбрасывает исключение.

ui-select внутренне создает поле ввода без name приписывать. Отсюда и ошибка.

Вы можете попробовать это, чтобы избавиться от ошибки.

directive('input', function () {
    var count = 0;
    return {
      restrict: 'E',
      compile: function () {
        return {
          pre: function (scope, element, attrs) {
            // if the input is created by ui-select and has ng-model
            if (element.hasClass('ui-select-search') && attrs.ngModel) {
              if (!attrs.name) { // if the input is not having any name
                attrs.name = 'ui-select' + (++count); // assign name
              }
            }
          }
        }
      }
    }
  })

Рабочая Плнкр