Skip to content
This repository has been archived by the owner on Oct 2, 2019. It is now read-only.

How to validate the select input? #788

Closed
burzum opened this issue Mar 23, 2015 · 16 comments
Closed

How to validate the select input? #788

burzum opened this issue Mar 23, 2015 · 16 comments

Comments

@burzum
Copy link

burzum commented Mar 23, 2015

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
Copy link

krema commented Apr 9, 2015

+1

@JobaDiniz
Copy link

+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
Copy link
Contributor

Josh68 commented May 1, 2015

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
Copy link

ibbatta commented Jun 8, 2015

+1

2 similar comments
@talski
Copy link

talski commented Aug 11, 2015

+1

@ericmillsio
Copy link

+1

@jingzhou123
Copy link

+1

5 similar comments
@netrevisanto
Copy link

+1

@ibbatta
Copy link

ibbatta commented Oct 26, 2015

+1

@keithmullins
Copy link

+1

@rosscdh
Copy link

rosscdh commented Jan 20, 2016

+1

@ibbatta
Copy link

ibbatta commented Jan 20, 2016

+1

@AlexEmashev
Copy link

same problem

@lpotapczuk
Copy link

+1

1 similar comment
@devmarwen
Copy link

👍

@wesleycho
Copy link
Contributor

Closing as a duplicate of #403 at heart

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.