how to block free text entering in angular ui-select

Question

Lib link : https://github.com/angular-ui/ui-select

Is there any way to Block the user edit in multiSelect ?

I want to allow user to only clear the previously selected data , But how to block him from entering any free text in the ui-select

http://plnkr.co/edit/juqoNOt1z1Gb349XabQ2?p=preview

<ui-select multiple ng-model="multipleDemo.colors" theme="select2" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="color in availableColors | filter:$select.search">
      {{color}}
    </ui-select-choices>
  </ui-select>

Referring above code and plunker , Currently in the ui-select "Blue , Red " color's are selected and user can clear those values, but if user tries to enter some text in the ui select its allowing for modification ,

"but my requirement is to block the user from entering such texts in that field."

Thanks in advance.

P.JAYASRI · Answer 1 · 2015-03-09T11:02:16.693

6

Prevent to enter letter in select box

you can use onkeypress attribute

live code here http://plnkr.co/edit/jE0qBpewzvHG5oamB7vQ?s=TIKKc2Zmyq5lcvXI&p=preview

<ui-select multiple ng-model="multipleDemo.colors" onkeypress="return false;" theme="select2" ng-change="call()" ng-disabled="disabled" style="width: 300px;">
<ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
<ui-select-choices repeat="color in availableColors | filter:$select.search">
  {{color}}
</ui-select-choices>

Selected: {{multipleDemo.colors}}

edited Mar 09 '15 at 11:02

answered Mar 06 '15 at 11:20

P.JAYASRI

358
2
18

sorry . please remove "call() " on ng-change i just post it for verification. forgot remove it. – P.JAYASRI Mar 06 '15 at 11:23

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

ui-select-match is used to display the selected value that can also contain a template.

I'd suggest you to maintain two templates to shown inside the ui-select-match element. 1st one will be shown when ui-select is not disable and the other one would be when ui-select is disable.

Markup

  <ui-select multiple ng-model="multipleDemo.colors" theme="select2" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select colors...">
      <span ng-if="!disabled">{{$item}}</span>
      <span ng-if="disabled">
        <a class="glyphicon glyphicon-remove" ng-click="$select.removeChoice($index)" tabindex="-1"></a>
        {{$item}}
      </span>
    </ui-select-match>
    <ui-select-choices repeat="color in availableColors | filter:$select.search">
      {{color}}
    </ui-select-choices>
  </ui-select>

Working Plunkr

I don't think so the there is any solution on this by ui-select. Above is workaround by me :-)

Hopefully this would help you, Thanks.

score 1 · Answer 3 · answered Oct 18 '18 at 14:53

The fact that the search input text exists is a real trouble when we use pads and smartphones. The keyboard always pops up.

<ui-select 
       multiple ng-model="multipleDemo.colors" 
       onkeypress="return false;" 
       theme="select2" 
       ng-change="call()" 
       ng-disabled="disabled" 
       style="width: 300px;"
       class="disable-filter"
       >

I try to add all of this but it doesn't work.

score -1 · Answer 4 · answered Oct 31 '16 at 21:44

In addition to P.JAYASRI answer, you can also add this SASS CSS to remove the input cursor:

.ui-select-container.disable-filter {
    .ui-select-search {
        color: transparent;
        text-shadow: 0 0 0 gray;
    }
}

So it would look like:

<ui-select 
           multiple ng-model="multipleDemo.colors" 
           onkeypress="return false;" 
           theme="select2" 
           ng-change="call()" 
           ng-disabled="disabled" 
           style="width: 300px;"
           class="disable-filter"
           >
  ...

how to block free text entering in angular ui-select

4 Answers4