[英]How do I prevent form submission in Angularjs if I am submitting the form using enter key?
I have applied validation to my form (It has only two fields) but don't know how to prevent it from submitting,Current flow is: After pressing enter key the student's name and marks are added on localstorage and are displayed on the screen from there but I am unable to prevent empty data from submitting. 我已经将验证应用于我的表单(它只有两个字段),但是不知道如何阻止它提交,当前流程是:按Enter键后,学生的姓名和标记将添加到本地存储中,并在屏幕上显示在那里,但我无法阻止提交空白数据。
These are my js functions: 这些是我的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);
};
This is the html part: 这是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>
Supposing that your fields are correctly validating, to prevent the submit
you could use ngDisabled
directive, as below: 假设您的字段正确验证,为防止submit
您可以使用ngDisabled
指令,如下所示:
<button type="submit" ng-disabled="form.$invalid">Submit</button>
EDIT: Since the OP provided the full code I was able to give the correct answer, that is: 编辑:由于OP提供了完整的代码,所以我能够给出正确的答案,即:
Change the check to: 将支票更改为:
if (event.which == 13 && $scope.student && $scope.marks) {
Snippet working based on your code
: 片段根据您的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>
Tips: 提示:
The ngModel
$scope.marks
is already a number, you don't need to to do any parse
, so you can have 'Marks': $scope.marks
. ngModel
$scope.marks
已经是一个数字,您无需进行任何parse
,因此可以使用'Marks': $scope.marks
。
The check of pass
can simply reduced to: 'pass': $scope.marks > 65
的检验pass
可以简单地简化为: 'pass': $scope.marks > 65
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.