禁用Angularjs的多个ui-select上的表单提交

Question

当为 AngularJS 使用多个版本的 UI-Select 时，一旦用户按下回车，表单就会提交。许多用户开始输入标签并按回车键选择它并搜索新标签。但是一旦用户按下输入，表单就会被提交。

禁用此功能的最佳“Angular”方法是什么？

见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按钮。