How to validate the select input?

[burzum]

I've already spent some time on trying to figure out how to do this without much success:

How can I validate an input to be not empty using the standard angular form validation mechanism?

[krema]

+1

[JobaDiniz]

+1.

I've tried to change the code to also pass nameparameter, however nothing worked:
Angular 1.2.28

select template

<div class="ui-select-container ui-select-bootstrap dropdown" ng-class="{open: $select.open}">
    <div class="ui-select-match"></div>
    <input type="text" autocomplete="off" tabindex="-1" id="{{$select.id}}" name="{{$select.name}}"
           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="ui-select-search"
           placeholder="{{$select.placeholder}}"
           ng-model="$select.search"
           ng-show="$select.searchEnabled && $select.open">
    <div class="ui-select-choices"></div>
</div>

uiSelectMatch

directive('uiSelectMatch', ['uiSelectConfig', function(uiSelectConfig) {
            return {
                restrict: 'EA',
                require: '^uiSelect',
                replace: true,
                transclude: true,
                templateUrl: function(tElement) {
                    // Gets theme attribute from parent (ui-select)
                    var theme = tElement.parent().attr('theme') || uiSelectConfig.theme;
                    var multi = tElement.parent().attr('multiple');
                    return theme + (multi ? '/match-multiple.tpl.html' : '/match.tpl.html');
                },
                link: function(scope, element, attrs, $select) {
                    $select.lockChoiceExpression = attrs.uiLockChoice;
                    attrs.$observe('placeholder', function(placeholder) {
                        $select.placeholder = placeholder !== undefined ? placeholder : uiSelectConfig.placeholder;
                    });
                    attrs.$observe('name', function(name) {
                        $select.name = name !== undefined ? name : uiSelectConfig.name;
                    });
                    attrs.$observe('id', function(id) {
                        $select.id = id !== undefined ? id : uiSelectConfig.id;
                    });

                    $select.allowClear = (angular.isDefined(attrs.allowClear)) ? (attrs.allowClear === '') ? true : (attrs.allowClear.toLowerCase() === 'true') : false;

                    if($select.multiple){
                        $select.sizeSearchInput();
                    }

                }
            };
        }])

Related issues: #556 #850 #354

[Josh68]

I recently worked on a small typeahead directive in my own project. This seems to have worked.

(Idea taken from https://gist.github.com/mbenford/dd7556f01963f49e5c7d (mbenford))

Implement another directive for binding attributes (sort of a replacement for ngAttr)

angular.module('ngApp')
    .directive('ngBindAttrs', ngBindAttrsDirective);

  function ngBindAttrsDirective() {
    return {
      restrict: 'A',
      controller: function($scope, $element, $attrs) {
        var attrsObj = $scope.$eval($attrs.ngBindAttrs);
        angular.forEach(attrsObj, function(value, key) {
          $attrs.$set(key, value);
        });
      }
    };
  }

Pass it to the select's (or whatever other directive's) isolated scope:

<element input-name="inputValue"></element>

scope: {
    inputName: '@'
}

Use it like this in the select input's (or other directive's) template:

ng-bind-attrs="{name: inputName}"

My template's input now registers with the form controller correctly and sets up all of the appropriate angular validation properties and methods on itself and the form.

One issue maybe for this module -- I can only get this to work with an isolated scope (mapping to attributes on the parent scope).

[ibbatta]

+1

[talski]

+1

[ericmillsio]

+1

[jingzhou123]

+1

[netrevisanto]

+1

[ibbatta]

+1

[keithmullins]

+1

[rosscdh]

+1

[ibbatta]

+1

[AlexEmashev]

same problem

[lpotapczuk]

+1

[devmarwen]

👍

[wesleycho]

Closing as a duplicate of #403 at heart