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

Question

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

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

<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

简单地避免使用 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按钮.

Answer 2

如果我理解您的要求，这个 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();
  }

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

Disable form submit on multiple ui-select for Angularjs

angularjs

ui-select2

ui-select

angularjs-select2