Jak uniemożliwić swobodny tekst w komponencie md-autocomplete materiału kątowego?

Question

Jak zablokować dostęp do bezpłatnego tekstu w md-autouzupełnieniu? Chcę, aby użytkownicy mogli wybrać tylko z listy elementów lub dodać wiadomość Ng na podstawie pewnej weryfikacji, jeśli element nie jest wybrany z listy. Angular material md-autocomplete demo

Answer 1

można na bieżąco dodawać nowe pozycje do listy:

<md-autocomplete flex required="required" 
        md-input-name="id" 
        md-selected-item="newItem.item" 
        md-search-text="itemSearch.queryText" 
        md-items="itemin itemSearch.querySearch()" 
        md-item-text="item.name" 
        md-input-minlength="2" 
        md-floating-label="enter here"> 
    <md-item-template> 
         <span md-highlight-text="itemSearch.queryText" 
       md-highlight-flags="^i">{{item.name}}</span> 
    </md-item-template> 
    <md-not-found> 
     Sorry, this is not in our database 
    </md-not-found> 
    <div ng-messages="formName.id.$error"> 
     <div ng-message="required">You must enter a name</div> 
     <div ng-message="minlength">You must type at least two characters</div> 
    </div> 
    </md-autocomplete> 

edit: wystarczy umieścić swoją wiadomość wewnątrz <md-not-found>

Answer 2

To jest możliwe, ale wymaga rozwiązania. Zasadniczo sprawdzanie poprawności odbywa się ręcznie w selectedItemChange i searchTextChange.

function searchTextChange(text) { 
    self.form.id.$error.stateMissing = true; 
    $log.info('Text changed to ' + text); 
} 

function selectedItemChange(item) { 
    $log.info(self.form.id); 
    if (item === null) { 
    $log.info('invalid'); 
    } else { 
    $log.info('valid'); 
    delete self.form.id.$error.stateMissing; 
    self.form.id.$validate(); 
    } 
} 

Błąd znajduje się we właściwości stateMissing a następnie wykorzystywane w znacznikach ng-message. Ważne jest, aby ustawić nazwę formularza, aby można było odwołać się do formularza w kontrolerze.

<form name="ctrl.form" novalidate> 
    <p>Use <code>md-autocomplete</code> to search for matches from local or remote data sources.</p> 
    <md-autocomplete md-autoselect md-select-on-focus md-floating-label="Select a state" ng-disabled="ctrl.isDisabled" cache="ctrl.noCache" md-selected-item="ctrl.selectedItem" md-input-name="id" md-search-text-change="ctrl.searchTextChange(ctrl.searchText)" md-search-text="ctrl.searchText" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.display" md-min-length="0" md-selected-item-change="ctrl.selectedItemChange(ctrl.selectedItem)"> 
     <md-item-template> 
     <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span> 
     </md-item-template> 
     <md-not-found> 
     No states matching "{{ctrl.searchText}}" were found. 
     <a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a> 
     </md-not-found> 
     <div ng-messages="ctrl.form.id.$error"> 
     <div ng-message="stateMissing">You must select a state</div> 
     </div> 
    </md-autocomplete> 

http://codepen.io/kuhnroyal/pen/eZXXVr