validation - 在不使用 ngSubmit 的情况下进行 Angular 表单验证

Question

这是一个带有所需输入的简单表单:

<div ng-controller="MainCtrl">
    <form name="add-entry" press-enter="add_entry()">
        <input type="text" ng-model="amount" required />
        <!-- <input type="submit" value="Add" /> -->
    </form>
</div>

该表单使用自定义 pressEnter 指令，因为我不愿意使用 <input type="submit" />在我的标记中，即使我可以用绝对定位和诸如此类的东西来隐藏它(使用 ngSubmit 而不是 pressEnter 将需要其中之一来触发表达式)。

angular.module('app', []).directive('pressEnter', function() {
  return function(scope, element, attrs) {
    element.bind("keydown keypress", function(event) {
      if(event.which === 13) {
        scope.$apply(function(){
          scope.$eval(attrs.pressEnter);
        });
        event.preventDefault();
      }
    });
  };
});

现在的问题是 required如果没有 ngSubmit，属性也不会被考虑在内.见 http://jsfiddle.net/w6QHD/12/ -- 你可以看到在空输入上按回车仍然会触发 add_entry() .仅在使用 ngSubmit 时验证表单而不是 pressEnter并取消注释 <input type="submit"> .

如何在不使用 ngSubmit 的情况下进行表单验证?

Answer 1

您是要依赖 HTML5 验证还是依赖 AngularJS 验证并不是很清楚。
如果您想使用 Angular 验证，则可以简单地使用 FormController触发验证和错误消息:

<div ng-controller="MainCtrl">
  <form name="form" press-enter="add_entry()" novalidate>
    <input type="text" name="amount" ng-model="amount" required />
    <span ng-show="submitted && form.amount.$error.required">Amount is required</span>
  </form>
</div>

function MainCtrl($scope) {
    $scope.add_entry = function() {
        $scope.submitted = true;
        if($scope.form.$valid){
            console.log("Entry added");
        }
    }
};

FIDDLE