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代替{{1需要其中一个来激活表达式。）

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属性。请参阅http://jsfiddle.net/w6QHD/12/ - 您可以看到在空输入上按Enter仍然会触发ngSubmit。只有在使用add_entry()代替ngSubmit并取消注释pressEnter时才会验证表单。

如何在不使用<input type="submit">的情况下进行表单验证？

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

无需使用ngSubmit即可使角度表单验证工作

1 个答案: