使用按钮提交，在输入时，在表单之外仅使用 Angular答案

【问题标题】：Submit with button, on enter, outside of form with only Angular使用按钮提交，在输入时，在表单之外仅使用 Angular
【发布时间】：2017-04-06 02:53:12
【问题描述】：

您会为 Angular“表单”实施什么解决方案，您希望它在按 Enter 键时提交，但您无法重新排列元素以适应 <form> 元素。比如这样的：

<div>
    <input/>
    <input/>

    //This might act as a kind of custom built select
    <ul>
        <li></li>
    </ul>

    <form></form> //Dropzone form for instance.

    <button type="submit" ng-click="submitFunction()">Submit</button>
</div>

我希望用户能够在焦点位于这些元素中的任何一个（不仅仅是真正的表单元素）时按 Enter 键，并提交表单（当然是验证通过）。解决方案应该是纯粹的 Angualr（如果可能的话）。我宁愿它不使用复杂的CSS定位，我不想重新排列和混淆html结构。

我在网上看到了一个自定义“ngEnter”类型指令的解决方案，我认为它很有希望，但我认为团队中的每个人都不会喜欢这个解决方案。我想知道还有其他方法可以解决这个问题。

【问题讨论】：

ng-keypress 然后检查键码并触发 submitFunction()
请参阅this link 了解更多信息。您也可以使用 ng-click，因为 enter 会触发此操作。

标签： javascript html angularjs forms

【解决方案1】：

See this article for more info.

这是一个 sn-p，展示了如何使用 ng-keypress 有条件地登录到控制台：

angular.module('myExample', [])
  .controller('myController', ['$scope', function($scope) {
    $scope.myFunction = function() {
     console.log('hi!');
    }
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myExample">
  <div ng-controller="myController">
    <input placeholder="type something" ng-keypress="$event.which === 13 && myFunction()">
  </div>
</div>

【讨论】：