Disable form submit on multiple ui-select for Angularjs

Question

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>

score 3 · Accepted Answer · answered Jul 30 '15 at 01:57

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();
  }

score 1 · Answer 2 · answered Jul 27 '15 at 12:33

simply avoid from the ng-submit and use ng-click on a button to submit the form,

<form>
    <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>
  <button type="button" ng-click="submit()">Submit</button>
</form>

don't forget to define the button type to button, if there is no type for a button in a form it is a submit button of the form by default.

My forms actually only has 1 required field. By disabling ng-submit on the form I'm blocking out my power users that enter the required field and press enter because they don't need fill anything else in. It's a solution but not the perfect solution in my eyes — Kevin Cloet, Jul 27 '15 at 12:36

Disable form submit on multiple ui-select for Angularjs

2 Answers2