2015-12-08 2 views
1

md-autocomplete предоставляет класс с именем md-not-found в контейнере md-virtual-repeat, когда вы пытаетесь выполнить поиск для элемента, который не существует в раскрывающемся списке, отображая сообщение об ошибке внизу. Когда вы удаляете фокус с входного элемента, md-not-found удаляется. Таким образом, автозаполнение дает ложное представление о наличии действительного ввода, так как пользователю не предоставляется обратная связь.md-autocomplete в угловом материале - как сохранить класс «md-not-found»

Есть ли способ сохранить класс «md-not-found», даже после того, как вы развяжете входной элемент?

мкр-автозаполнения официальный демо: https://material.angularjs.org/latest/demo/autocomplete

Update

Я сделал временное решение:

<label class="{{selectedItem !== null || searchText === '' ? '' : 'label-error'}}">Name</label> 

Класс пометку ошибка относится красный цвет.

Решение не является ответ на вопрос, сами по себе, но предлагает альтернативное быстрое решение

ответ

0

я использовал MD-автозаполнение внутри MD-чипов и его работы, а также, как вы хотите. При возврате запроса noContent (204) md-not-found отображается и не исчезает до тех пор, пока пользователь не начнет текстовое сообщение снова.

<md-content layout="column"> 
 
    <md-chips 
 
       class="md-input" 
 
       ng-model="myItem" 
 
       md-autocomplete-snap 
 
       md-on-add="change()" 
 
       md-on-remove="change()" 
 
       required 
 
       md-require-match="true" 
 
       md-transform-chip="reformr($chip)" 
 
       md-separator-keys="keys"> 
 
<md-autocomplete md-selected-item="selectedItem" 
 
           md-no-cache="true" 
 
           md-search-text="search.text" 
 
           md-items="item in getSuggestedItems()" 
 
           md-item-text="item.name" 
 
           md-min-length="0" 
 
           placeholder="{{ 'textItemName' | translate }}" 
 
           required 
 
           md-input-name="suggestedItem" 
 
           md-search-text-change="listSuggestedItems(search.text)"> 
 
       <span md-highlight-text="search.text" md-highlight-flags="^i">{{item.name}}</span> 
 
       <md-not-found> 
 
        {{'no_item_found' | translate}} 
 
       </md-not-found> 
 
       </md-autocomplete> 
 
    </md-content>