Автозаполнение углового материала md-input-maxlength не работает

0

Я пытаюсь установить максимальную длину в Autocomplete Angular Material с парой конфигурации, но не работает:

<md-autocomplete md-input-maxlength='10' md-input-name="autocomplete" data-md-selected-item="myItem" data-md-search-text="searchText"
    data-md-items="item in getMatches(list, searchText)">
    <md-item-template>
        {{item}}
    </md-item-template>
</md-autocomplete>

У меня есть документ, но он не работает.

Как установить максимальную длину для Angular Material autocomplete?

Теги:
angular-material
autocomplete

1 ответ

0

вам нужно использовать ng-messages для отображения сообщений проверки

angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']).controller('DemoCtrl', function($timeout, $q) {
    var self = this;
    self.states = loadAll();
    self.selectedItem = null;
    self.searchText = null;
    self.querySearch = querySearch;
    
    $timeout(function() {
        var inputs = document.querySelectorAll('md-autocomplete[md-input-maxlength]');
        for (var i = 0; i < inputs.length; i++) {
            var minLength = inputs[i].attributes['md-input-minlength'].value,
                maxLength = inputs[i].attributes['md-input-maxlength'].value,
                input = inputs[i].getElementsByTagName('INPUT')[0];
            input.setAttribute('minlength', minLength);
            input.setAttribute('maxlength', maxLength);
        }
    }, 500, false);


    function querySearch(query) {
        var results = query ? self.states.filter(createFilterFor(query)) : self.states;
        var deferred = $q.defer();
        $timeout(function() {
            deferred.resolve(results);
        }, Math.random() * 1000, false);
        return deferred.promise;
    }

    function loadAll() {
        var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
          Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
          Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
          Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
          North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
          South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
          Wisconsin, Wyoming';

        return allStates.split(/, +/g).map(function(state) {
            return {
                value: state.toLowerCase(),
                display: state
            };
        });
    }

    function createFilterFor(query) {
        var lowercaseQuery = angular.lowercase(query);
        return function filterFn(state) {
            return (state.value.indexOf(lowercaseQuery) === 0);
        };
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.css">
<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak="" class="autocompletedemoFloatingLabel" ng-app="MyApp">
    <md-content class="md-padding">
        <form ng-submit="$event.preventDefault()" name="searchForm">
            <div layout-gt-sm="row">
                <md-autocomplete flex md-require-match="" md-input-name="autocompleteField" 
                    md-input-minlength="2" md-input-maxlength="6" 
                    md-no-cache="ctrl.noCache"
                    md-selected-item="ctrl.selectedItem" 
                    md-search-text="ctrl.searchText" 
                    md-items="item in ctrl.querySearch(ctrl.searchText)"
                    md-item-text="item.display" 
                    md-floating-label="Favorite state">
                    <md-item-template>
                        <span md-highlight-text="ctrl.searchText">{{item.display}}</span>
                    </md-item-template>
                    <div ng-messages="searchForm.autocompleteField.$error" ng-if="searchForm.autocompleteField.$touched">
                        <div ng-message="required">You <b>must</b> have a favorite state.</div>
                        <div ng-message="md-require-match">Please select an existing state.</div>
                        <div ng-message="minlength">Your entry is not long enough.</div>
                        <div ng-message="maxlength">Your entry is too long.</div>
                    </div>
                </md-autocomplete>
            </div>
        </form>
    </md-content>
</div>
  • 0
    Таким образом, md-max-length не для символов предельного типа, таких как атрибут HTML maxlength , предназначен для проверки?
  • 0
    да .. я добавил функцию $timeout чтобы обновить все inputs с min и max длинами. теперь он должен работать так, как вы ожидали

Ещё вопросы

Сообщество Overcoder
Наверх
Меню