角材質自動完成MD-輸入最大長度不工作

Question

我嘗試設置最大長度的Angular Material與休耕配置​​3210，但不工作：

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

我已經撂荒了document，但不工作。

如何將最大長度設置爲Angular Material autocomplete？

Answer 1

你需要使用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>