Wie kann man freien Text in der md-Autocomplete-Komponente von eckigem Material verbieten?

Question

Wie verbieten Sie freien Text in MD-Autocomplete? Ich möchte, dass die Benutzer nur in der Lage sind, aus der Liste der Elemente auszuwählen oder eine ng-Nachricht basierend auf einer Validierung hinzuzufügen, wenn das Element nicht aus der Liste ausgewählt ist. Angular material md-autocomplete demo

Answer 1

Sie können im laufenden Betrieb neue Objekte zu der Liste hinzufügen:

<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: nur nach innen setzen Ihre Nachricht <md-not-found>

Answer 2

Dies ist möglich, aber einige Abhilfen muss. Sie führen die Validierung grundsätzlich manuell in selectedItemChange und searchTextChange durch.

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(); 
    } 
} 

Der Fehler wird in der stateMissing Eigenschaft festgelegt und dann in der Auszeichnungs ng-message verwendet. Es ist wichtig, den Formularnamen festzulegen, damit Sie auf das Formular in Ihrem Controller verweisen können.

<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