angularjsui-select2ui-selectangularjs-select2

Disable form submit on multiple ui-select for Angularjs


When using the multiple version of UI-Select for AngularJS the form is submitted once a user presses enter. Many users start typing a tag and press enter to select it and search for a new one. But once the users presses enter the form is submitted.

What is the best 'Angular' way to disabled this?

See example

<form ng-submit="submit()">
  <ui-select multiple ng-model="multipleDemo.colors" theme="select2"  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>
  <p>Selected: {{multipleDemo.colors}}</p>

  <div style="height:500px"></div>
  </form>

Solution

  • If I understand your requirement, this solution will work for you. Please leave your comment if you want to achieve something else.

    index.html

    <ui-select ng-keypress="selec2_keypress($event)" multiple ng-model="multipleDemo.colors" theme="select2"  style="width: 300px;">
    

    demo.js

     $scope.selec2_keypress = function(event) {
        if (event.which === 13)
          event.preventDefault();
      }