angular-validator and ui-select

Question

I´m newbie in angular. I´m using angular-validator to validate the inputs in my application. I´m using ui-select plugin to display select list. I need is to validate if the user submitted a form & he didn't chosen an option in the select list then I'm gonna show required error message like the first input does in Plunkr. I believe that the validation is right but it doesn't show any error message, I've searched in the web but still no luck in R&D.

Any help would appreciated, Thanks in advance (Apologize for my Bad English)

Problem Plunkr

oh sorry, it was working only in chrome, i have updated the Plunkr, here is the new one: http://plnkr.co/edit/TbDVS2AmJTk8akvAY0C3?p=preview — reds071286, Mar 07 '15 at 16:17
what is you current problem, get validation working in firefox? OR you want to show validation for `ui-select` field? — Pankaj Parkar, Mar 07 '15 at 17:42
ok, Can you help me to implement an own directive to solve this?, i´m newbie in angular. — reds071286, Mar 09 '15 at 18:16
look at this http://plnkr.co/edit/ArO0dUwd0ClVkWBm1Q7n?p=preview — Pankaj Parkar, Mar 09 '15 at 18:22
thank you very much, i found a directive and now i can validate ui-select field, if anybody needs, here you can check it out: http://blog.yodersolutions.com/bootstrap-form-validation-done-right-in-angularjs/ and this is my plunkr: http://plnkr.co/edit/hUOx0Rc8IBsjKvpvxl0l?p=preview — reds071286, Mar 10 '15 at 19:35
cool you could add it as answer..that would help others :) or you can edit my answer tooo — Pankaj Parkar, Mar 10 '15 at 20:15

score 3 · Answer 1 · answered Mar 10 '15 at 23:05

There´s one directive that solve this, here´s the code:

app.directive('showErrors', function($timeout) {
return {
  restrict: 'A',
  require: '^form',
  link: function (scope, el, attrs, formCtrl) {
    // find the text box element, which has the 'name' attribute
    var inputEl   = el[0].querySelector("[name]");
    // convert the native text box element to an angular element
    var inputNgEl = angular.element(inputEl);
    // get the name on the text box
    var inputName = inputNgEl.attr('name');

    // only apply the has-error class after the user leaves the text box
    var blurred = false;
    inputNgEl.bind('blur', function() {
      blurred = true;
      el.toggleClass('has-error', formCtrl[inputName].$invalid);
    });

    scope.$watch(function() {
      return formCtrl[inputName].$invalid
    }, function(invalid) {
      // we only want to toggle the has-error class after the blur
      // event or if the control becomes valid
      if (!blurred && invalid) { return }
      el.toggleClass('has-error', invalid);
    });

    scope.$on('show-errors-check-validity', function() {
      el.toggleClass('has-error', formCtrl[inputName].$invalid);
    });

    scope.$on('show-errors-reset', function() {
      $timeout(function() {
        el.removeClass('has-error');
      }, 0, false);
    });
  }
}});

Here is the documentation: http://blog.yodersolutions.com/bootstrap-form-validation-done-right-in-angularjs/ and this is an example wiht ui-select: Plunkr

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

You are using form then validation tracking would easy in AngularJS by playing form variable. Do mention element of form as required and get error by doing like formName.attributeName.$error.required

Question isn't clear so there might be 2 ways can solve your problem.

In ui-select when you use single select box at that time put required attribute on that select element, form will automatically gets invalid if you don't provide value for ui-select
If you are using multiple select then the required attribute on element level won't help you (Github issue link). For solving this issue you need to add one directive that will provide validation of required

Directive

module.directive('uiSelectRequired', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$validators.uiSelectRequired = function(modelValue, viewValue) {
        return modelValue && modelValue.length;
      };
    }
  };
});

Plunkr

Hope this could help you, Thanks.

ok, thanks, i´m usign a single select box, and i mentioned, i think the validation is working, you can´t submit the form if you has not selected an element in the select box, but i don´t know how to show the required message like the first input is showing in the Plunkr — reds071286, Mar 06 '15 at 22:30

score 0 · Answer 3 · answered Jul 17 '17 at 10:32

Try this, hope it will be helpful for you:

<div class="form-group col-md-3" style="margin-left:50px" ng-class="{'has-error': datosDeUbicacion.$submitted && datosDeUbicacion.viviendas.$invalid}">
        <label class="control-label" for="tipoViviendas">TIPO DE VIVIENDA</label>
        <ui-select name="viviendas" ng-model="viviendas.selected" class="form-control" theme="select2" reset-search-input="true" required>
          <ui-select-match placeholder="Selecciona">{{$select.selected.nombre}}</ui-select-match>
          <ui-select-choices repeat="item in tipoViviendas | filter: $select.search">
            <div ng-bind-html="item.nombre | highlight: $select.search"></div>
          </ui-select-choices>
        </ui-select>
        <div ng-if="datosDeUbicacion.$submitted && datosDeUbicacion.viviendas.$error.required" class="help-block">
                   <div>This is required</div>
        </div>
</div>

Plunker

angular-validator and ui-select

3 Answers3