paulyoder/angular-bootstrap-show-errors

Support of ui-select

Opened this issue · 12 comments

First, thank you very much for this great directive!

I try to use this with ui-select (https://github.com/angular-ui/ui-select). But I think there are conflicts and I'm not shure how to get it work. Also I'm not sure, if it's fixable in show-errors (maybe it must be "fixed" in ui-select?).

With this plunker (http://plnkr.co/edit/PRsXlYuJfrP46FhC5O0s?p=preview) you can reproduce the following:

  1. Load the plunker + click on Add (don't input any data) -> it works like expected.
  2. Choose an item and fill in a number in the input -> while the error border on the normal input disappears (after validation), the error border on the select persists.
  3. Now click on Add (JavaScript function clears the data and broadcasts show-errors-reset) -> there is still an error indicator on the select (please notice: this is a different one of ui-select -> conflict?)

Do you know a way to fix this? I already tried to "override" the ui-select style. Look at this hack:

.ui-select-bootstrap.ng-dirty.ng-invalid > button.btn.ui-select-match {
    border-color: #CCC !important;
}

Obviously show-error isn't able to set the border-color, anymore.

Any help would be appreciated!

I've just downloaded it and found the same following. Let me know if you have any luck.

I was just preparing to open an issue regarding ui-select support and found this.

Any chance to have ui-select integration? :)

+1 for a fix of this!

+1 for a fix of this

I think the issue may indeed be with ui-select. I was able to get this to work by adding on-select="rerunValidation()" to my ui-select. In my controller, the rerunValidation was simply:

$scope.rerunValidation = function() {
$timeout(function() {$scope.$broadcast('show-errors-check-validity'} ))
}

See a demo here: http://plnkr.co/edit/OjoRp7QWO89OQhNUTlaZ?p=preview

UI-select doesn't seem to be triggering 'blur' or 'onchange' when an element is selected. This is the only way I've been able to get it to work.

+1

@paulyoder Would be cool to have option to specify any element as "input" instead of searching for it automatically. It will solve ui-select or any other directive usage, that wraps <input>

+1

+1