Come disabilitare il testo libero nel componente md-autocomplete di materiale angolare?

Question

Come disabilitare il testo libero in md-autocomplete? Voglio che gli utenti siano in grado di selezionare solo dall'elenco di elementi o aggiungere un messaggio ng in base a una convalida se l'elemento non è selezionato dall'elenco. Angular material md-autocomplete demo

Answer 1

È possibile al volo aggiungere nuovi elementi alla lista:

<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: basta mettere il vostro messaggio all'interno <md-not-found>

Answer 2

Questo è possibile, ma necessita di alcune soluzioni. Fondamentalmente fai la validazione manualmente in selectedItemChange e 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(); 
    } 
} 

L'errore viene impostato nella proprietà stateMissing e poi utilizzato nel ng-message markup. È importante impostare un nome per il modulo in modo da poter avere un riferimento al modulo nel controller.

<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