CODEWITHSUNDEEP
angularjsui-select
reds071286
reds071286

Reputation: 51

angular-validator and ui-select

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

Upvotes: 2

Views: 5690

Answers (3)

Mohamed dev
Mohamed dev

Reputation: 172

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

Upvotes: 0

reds071286
reds071286

Reputation: 51

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

Upvotes: 3

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

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.

  1. 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
  2. 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.

Upvotes: 0

Related Questions