angularJS valdr + ui-select валидация

Question

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

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, переписывать/изменять, скрытые входы с той же моделью, но результат тот же.

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

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

Фрагмент кода: 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 
       } 
      } 
      } 
     } 
     } 
    } 
    }) 

Working Plnkr