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 demoJak uniemożliwić swobodny tekst w komponencie md-autocomplete materiału kątowego?
6
A
Odpowiedz
0
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>
+0
nie, chciałem dać im błąd sprawdzania poprawności, który proszę wybrać tylko z listy rozwijanej .. – navneet35371
4
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>
co masz na myśli przez swobodnego tekstu? – optimus
Podobnie jak użytkownik nie może wprowadzić żadnej wartości w autouzupełnieniu .. musi wybrać z podpowiedzi autouzupełniania, aby był to prawidłowy wpis – navneet35371