Design materiale angolare Casella di testo completa automatica con selezione forzata

Question

In questo momento sto utilizzando il disegno angolare del materiale. Tutto funziona bene come previsto. Ora voglio usare il completamento automatico (Angular Material Design) con una scelta forzata in modo che l'utente debba sempre scegliere qualcosa. Non ci può essere la possibilità di entrare, l'utente può solo scegliere.

Qualcuno sa come farlo ??

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

È possibile implementare questa aggiungendo il proprio errore all'ingresso elemento del completamento automatico.

Questo è quello che io did-

All'interno del vostro 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 
    } 

visualizzare l'errore nel codice HTML

HTML:

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