angularjs ui-select basic validation

Question

I have a basic ui-select drop down with predefined items. I am also able to enter in text and add it to the list. What i need to be able to do is two things.

1. Allowed characters - az, AZ
2. Maximum characters allowed is 50

I would like to restrict them as they are typing. So, if there trying to search using a number it just doesnt work or past 50 characters it stops typing.

I found this example, How to set a max length for the search input in (AngularJS) ui-select component? but it doesnt work for me. I set it to 5 length to test. Im also, unsure how to restrict to only az characters.

Here is my HTML - this little bit is in a html table using ng-repeat

<div class="row">
     <div class="form-group">
      <div style="width:300px; margin-left:4px;" class="col-sm-6">
       <ui-select maxlen="5" ng-model="vehicle.linkNote" id="note-{{$index}}" on-select="selectNote(vehicle, $select.selected)">
        <ui-select-match  class="select" placeholder="Select or search a note in the list...">{{$select.selected }}</ui-select-match>
         <ui-select-choices  class="select" id="note-{{$index}}" repeat="note in getNotes($select.search) | filter: $select.search | orderBy:$select.search">
         <div class="select" for="note-{{$index}}" ng-bind="note"></div>
           </ui-select-choices>
             </ui-select>
            </div>
           </div>
          </div>

Here is part of my controller

    $scope.selectNote = function(vehicle, selectedNote) {
    vehicle.linkNote = selectedNote;
    $scope.linkNotes.unshift(selectedNote);
    $scope.submitMapping(vehicle);
};


$scope.options = function (vehicle, optionAdjustment) {
        vehicle.optionAdjustment = optionAdjustment;
        $scope.submitMapping(vehicle);
};


app.directive('maxlen', function($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            var $uiSelect = angular.element(element[0].querySelector('.ui-select-search'));
            $uiSelect.attr("maxlength", attr.maxlen);
        }
    }
});


$scope.$watch('note.selected', function(newVal, oldVal) {
    if (newVal !== oldVal) {
        if ($scope.linkNotes.indexOf(newVal) === -1) {
            $scope.linkNotes.unshift(newVal);
        }
    }
});

$scope.getNotes = function(search) {
    var newNotes = $scope.linkNotes.slice();

    if (search && newNotes.indexOf(search) === -1) {
        newNotes.unshift(search);

    }
    return newNotes;
};

$scope.linkNotes = [
    'Cannot link half years',
    'Conflicting data provided by vendor',
    'Duplicate',
    'Incomplete data provided by vendor',
    'No ASC Code',
    'No data provided by vendor'
].sort();

Answer 1

Probably not what you're looking for but all the functionality you describe above exists natively in HTML5.

• pattern="[a-zA-Z]+" will allow one or more characters: az, AZ
• maxlength="50" will limit maximum characters to 50

Working Example:

 <input list="fruit" maxlength="50" pattern="[A-Za-z]+" placeholder="What fruit?" /> <datalist id="fruit"> <option value="Apple"> <option value="Apricot"> <option value="Avocado"> <option value="Banana"> <option value="Cherry"> <option value="Pear"> <option value="Peach"> <option value="Pineapple"> </datalist>