Angular Material Design Auto Complete Textbox mit kraftvoller Auswahl

Question

Momentan verwende ich Angular Material Design. Alles funktioniert gut wie erwartet. Jetzt möchte ich Autocomplete (Angular Material Design) mit Kraft eine Auswahl, so dass der Benutzer immer etwas wählen muss. Es kann keine Eintrittsmöglichkeit geben, der Benutzer kann nur wählen.

Weiß jemand, wie man das macht ??

Angular Material Design-Link:

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

Sie können dies implementieren, indem Sie Ihre eigenen Fehler an den Eingang Hinzufügen Element der Autovervollständigung. Diese

ist, was ich DID

In Ihrem Controller:

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 
    } 

Anzeige der Fehler in Ihrem HTML

HTML:

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