Açısal Malzeme Tasarımı Otomatik Tamamlanmış Metin Kutusu, zorlu seçimle

Question

Şu anda Açısal Malzeme Tasarımı kullanıyorum. Her şey beklendiği gibi iyi çalışır. Şimdi otomatik tamamlamayı (Açısal Malzeme Tasarımı) zorlamak için kullanmak istiyorum, böylece kullanıcının her zaman bir şey seçmesi gerekiyor. Giriş yapma olasılığı yoktur, kullanıcı sadece seçebilir.

Bunu nasıl yapacağını bilen var mı?

Eğik Materyal Tasarımı Bağlantı:

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

Sen girişine kendi hatasını ekleyerek uygulayabilirsiniz otomatik tamamlama öğesi.

JS:

Bu

Ben senin Kontrolör İç

yaptım-ne

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

Ekran HTML'nize hata

HTML:

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