角度材質設計強力選擇自動完成文本框

Question

現在我正在使用Angular Material Design。一切都如預期般運作良好。 現在我想用強制選項自動完成（Angular Material Design），以便用戶必須始終選擇一些東西。不可能進入，用戶只能選擇。

有誰知道如何做到這一點？

角材質設計鏈接：

https://material.angularjs.org/latest/#/demo/material.components.autocomplete

autoCompleteController.js

pocApp.controller('autoCompleteCtrl', function ($scope, $log, $mdDialog) { 
$scope.selectedItem; 
$scope.searchText; 
$scope.states = loadAll(); 
$scope.querySearch = querySearch; 
$scope.srchText; 


$scope.onItemChange = function (item) { 
    $log.info(angular.toJson(item)); 
}; 

$scope.saveAutoComplete = function() { 
    $log.info($scope.selectedItem); 
}; 

function querySearch(query) { 
    var searchRes = []; 
    angular.forEach($scope.states, function (state) { 
     if (query === '') { 
      searchRes.push(state); 
     } 
     else if (state.value.indexOf(query.toLowerCase()) === 0) { 
      searchRes.push(state); 
     } 
    }); 
    return searchRes; 
} 

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

autoComplete.html

<div ng-controller="autoCompleteCtrl"> 
    <form name="frmGridMasterData2" novalidate style="padding: 30px"> 
     <md-autocomplete flex required 
         md-input-name="autocompleteField" 
         md-min-length="0" 
         md-input-minlength="2" 
         md-input-maxlength="18" 
         md-no-cache="true" 
         md-selected-item="selectedItem" 
         md-search-text="searchText" 
         md-items="item in querySearch(searchText)" 
         md-item-text="item.display" 
         md-selected-item-change ="onItemChange(item)" 
         md-select-on-match="true" 
         md-autoselect="true" 
         md-floating-label="Favorite state"> 
      <md-item-template> 
       <span md-highlight-text="searchText">{{item.display}}</span> 
      </md-item-template> 
      <div ng-messages="frmGridMasterData2.autocompleteField.$error" ng-if="frmGridMasterData2.autocompleteField.$touched"> 
       <div ng-message="required">You <b>must</b> have a favorite 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-not-found> 
       No matches found for. 
      </md-not-found> 
     </md-autocomplete> 

     <div class="row" style="padding-left: 10px"> 
      <div class="col-md-12"> 
       <md-button name="btnSaveAutoComplete" class="md-raised md-primary" 
          ng-click="saveAutoComplete()" ng-disabled="frmGridMasterData2.$invalid">Save</md-button> 
      </div> 
     </div> 
    </form> 
</div> 

Answer 1

您可以通過添加自己的錯誤輸入實現這個自動完成的元素。

這是我did-

內，您的控制器：

JS：

$scope.onItemChange=function(item){ 
     if (item===undefined) 
      $scope.formName.autocompletefield.$setValidity('notSelected',false);//sets error 
     else 
      $scope.formName.autocompletefield.$setValidity('notSelected',true);//removes error 
    } 
    $scope.querySearch=function(query){ 
     $scope.formName.autocompletefield.$setValidity('notSelected',false);//sets error 
     //your query code here 
    } 

顯示在你的HTML錯誤

HTML：

<div ng-message="notSelected"> 
     You have not selected Anything 
    </div>