angularJS valdr + ui-select validation

Question

I was googled on this issue but still can't find the right discussion about it. We are using valdr and ui select in a form ( angularJS app ) and we've faced the problem that the input that the ui-select renders won't get a name attribute, and since this, angular throws an error:

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

So we were tried some hacks on the ui-select directive like templateCache rewrite / modify, hidden inputs with the same model but the result is the same.

Btw templateCache rewriting is the worst approach because of this directive used in appwide by other directives and we cannot hack on the whole app.

Did anyone faced with this problem?

Code snippet: http://plnkr.co/edit/sDNDDtnhi7Jxi9mtjDTl?p=preview

You claim that "the ui-select renders won't get a name attribute" but the error message rather suggests your input field doesn't have an ID: "Form element with ID "undefined" is not bound to a field name", no? Maybe you should create a small Plunkr that shows this behavior. Start from here: http://plnkr.co/edit/AJC1YL206zmryGx31GFo?p=preview — Marcel Stör, Mar 17 '15 at 11:46
I'll check it. Well it tells ID missing, but as I see the inputs' ID is the same as its name — Dániel Sebestyén, Mar 17 '15 at 16:46
FYI: The latest valdr version (1.1.5) does not throw an exception anymore if there is no name on an input. See: https://github.com/netceteragroup/valdr/blob/master/CHANGELOG.md — philippd, Sep 22 '15 at 12:02

score 8 · Accepted Answer · answered Mar 19 '15 at 16:28

8

If the name attribute is not present on input element valdr throws exception.

ui-select internally creates a input field without name attribute. Hence the error.

You can try this to get rid of the error.

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

answered Mar 19 '15 at 16:28

Vinay K

5,562
1
18
27

Thanks, we'll check it soon. Keep in touch. – Dániel Sebestyén Mar 19 '15 at 17:04
1

I have checked it. Really works, we'll see it. Tomorrow we'll test the idea on the project. This plunk was right, but I'm affraid is has a hack-a-like approach. By the point of maintenance its not sure that is the best choice. – Dániel Sebestyén Mar 19 '15 at 19:03
@DánielSebestyén, you are correct. It's a hack. But to get rid of this error, we need a change in either of these libraries(ui-select, valdr) or the hack. – Vinay K Mar 20 '15 at 04:06
well its true. We've decided to agree and accept this solution. I think authors and contributors of both Project should take a look on this problem. Thanks for your help. – Dániel Sebestyén Mar 20 '15 at 09:28

angularJS valdr + ui-select validation

1 Answers1