Отключить форму отправить на несколько ui-select для Angularjs

Question

При использовании множественной версии UI-Select для AngularJS форма отправляется после нажатия пользователем ввода. Многие пользователи начинают вводить тег и нажимают клавишу ввода, чтобы выбрать его и выполнить поиск нового. Но как только пользователи нажимают кнопку, форма отправляется.

Каков наилучший способ «Углового» для этого?

См 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> 

Answer 1

Если я понимаю ваше требование, то этот solution будет работать на вас. Пожалуйста, оставьте свой комментарий, если вы хотите достичь чего-то еще.

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

Answer 2

просто избежать от ng-submit и использовать ng-click на кнопку, чтобы отправить форму,

<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> 

не забудьте определить button типа для button, если нет типа для кнопки в форме, это кнопка submit формы по умолчанию.