如果我使用Enter键提交表单，如何防止在Angularjs中提交表单？

Question

我已经将验证应用于我的表单（它只有两个字段），但是不知道如何阻止它提交，当前流程是：按Enter键后，学生的姓名和标记将添加到本地存储中，并在屏幕上显示在那里，但我无法阻止提交空白数据。

这些是我的js函数：

$scope.searchEnter = function() {
    if (event.which == 13 && $scope.student != "") {
        $scope.addStudent();
    }
};
$scope.addStudent = function() {
    if ($scope.marks > 65) {
        var pass = true;
    } else {
        pass = false;
    }
    $scope.students.push({ 'studentName': $scope.student, 'Marks': parseInt($scope.marks), 'pass': pass });
    $scope.student = '';
    $scope.marks = '';
    localStorage['studentsList'] = JSON.stringify($scope.students);

};

这是html部分：

 <div class="row">
        <div class="col-xs-12">
            <form class="form-horizontal" novalidate name="studentForm" >
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="student_name">Student's Name</label>
                    <div class="col-sm-5">
                    <input ng-model="student" ng-keyup="searchEnter()" type="text" class="form-control" id="student_name" ng-required="true" name="stdname">
                        <div ng-show="studentForm.stdname.$touched && studentForm.stdname.$invalid">
                            <small style="color:red; display:block;">Enter a valid name </small>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label" for="student_marks">Marks obtained</label>
                    <div class="col-sm-5">
                    <input ng-model="marks" ng-keyup="searchEnter()" type="number" class="form-control" id="student_marks" ng-required="true">Press ENTER to insert student's data in the table.</div>
                </div>
            </form>
        </div>
    </div>

Answer 1

假设您的字段正确验证，为防止submit您可以使用ngDisabled指令，如下所示：

<button type="submit" ng-disabled="form.$invalid">Submit</button>

编辑：由于OP提供了完整的代码，所以我能够给出正确的答案，即：

将支票更改为：

if (event.which == 13 && $scope.student && $scope.marks) {

片段根据您的code ：

 (function() { angular .module('app', []) .controller('MainCtrl', MainCtrl); MainCtrl.$inject = ['$scope']; function MainCtrl($scope) { $scope.students = []; $scope.searchEnter = function() { if (event.which == 13 && $scope.student && $scope.marks) { $scope.addStudent(); } }; $scope.addStudent = function() { console.log('addStudent called'); $scope.students.push({ 'studentName': $scope.student, 'Marks': $scope.marks, 'pass': $scope.marks > 65 }); $scope.student = ''; $scope.marks = ''; localStorage['studentsList'] = JSON.stringify($scope.students); }; } })();

 <!DOCTYPE html> <html ng-app="app"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body ng-controller="MainCtrl"> <div class="row"> <div class="col-xs-12"> <form class="form-horizontal" novalidate name="studentForm"> <div class="form-group"> <label class="col-sm-2 control-label" for="student_name">Student's Name</label> <div class="col-sm-5"> <input ng-model="student" ng-keyup="searchEnter()" type="text" class="form-control" id="student_name" ng-required="true" name="stdname"> <div ng-show="studentForm.stdname.$touched && studentForm.stdname.$invalid"> <small style="color:red; display:block;">Enter a valid name </small> </div> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="student_marks">Marks obtained</label> <div class="col-sm-5"> <input ng-model="marks" ng-keyup="searchEnter()" type="number" class="form-control" id="student_marks" ng-required="true">Press ENTER to insert student's data in the table.</div> </div> </form> </div> </div> </body> </html>

提示：

ngModel $scope.marks已经是一个数字，您无需进行任何parse ，因此可以使用'Marks': $scope.marks 。
的检验pass可以简单地简化为： 'pass': $scope.marks > 65

如果我使用Enter键提交表单，如何防止在Angularjs中提交表单？

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-07-26 03:09:28

如果我使用Enter键提交表单，如何防止在Angularjs中提交表单？

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-07-26 03:09:28

解决方案1
1 已采纳 2016-07-26 03:09:28