paulyoder / angular-bootstrap-show-errors

An Angular directive for Bootstrap to intelligently show form validation errors
MIT License
331 stars 77 forks source link

Support of ui-select #26

Open ybc37 opened 9 years ago

ybc37 commented 9 years ago

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!

PeterClough commented 9 years ago

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

adrianandreias commented 9 years ago

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

Any chance to have ui-select integration? :)

hewstone commented 9 years ago

+1 for a fix of this!

morgenes commented 9 years ago

+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.

ahuang321 commented 9 years ago

+1

rigobcastro commented 9 years ago

+1

masscrx commented 9 years ago

+1

diimpp commented 9 years ago

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

dudapiotr commented 9 years ago

+1

mujing commented 9 years ago

+1

brualves commented 8 years ago

+1

paveltyk commented 8 years ago

+1