Làm thế nào để không cho phép văn bản miễn phí trong thành phần md-autocomplete của vật liệu góc?

Question

Làm thế nào để không cho phép văn bản miễn phí trong md-autocomplete? Tôi muốn người dùng chỉ có thể chọn từ danh sách các mục hoặc thêm ng-tin dựa trên một số xác thực nếu mục không được chọn từ danh sách. Angular material md-autocomplete demo

Answer 1

Bạn có thể một cách nhanh chóng thêm các mục mới vào danh sách:

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

chỉnh sửa: chỉ cần đặt thông điệp của bạn bên <md-not-found>

Answer 2

này là có thể nhưng cần một số cách giải quyết. Bạn về cơ bản thực hiện xác thực theo cách thủ công trong selectedItemChange và 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(); 
    } 
} 

Các lỗi được thiết lập trong stateMissing tài sản và sau đó được sử dụng trong ng-message đánh dấu. Điều quan trọng là phải đặt tên biểu mẫu để bạn có thể tham chiếu đến biểu mẫu trong bộ điều khiển của mình.

<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