Question

我尝试将最大长度设置为Autocomplete的{{1}}，但配置不合理，但无效：

Angular Material

我已经暂停document，但无法正常工作。

如何将最大长度设置为<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>？

Answer 1

您需要使用ng-messages来显示验证消息

＆＃13;

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);
        };
    }
});

＆＃13;

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

＆＃13;

角度材质自动完成md-input-maxlength不起作用

1 个答案: