javascript - 验证表单 ng-click 功能不起作用后加载页面
问题描述
我是 angularjs 的新手。我正在验证触发保存功能的表单。
我将控件放在表单中并将其命名为myform。
我ng-required="true"
在名称和密码文本框中使用。
在保存按钮中,我调用了ng-click
该函数save()
<div ng-app="myApp" ng-controller="myControl">
<form name="myForm" novalidate>
<table>
<tr>
<td>
Name
</td>
<td>
<input type="text" class="form-control" id="txtName" name="Name" placeholder="Name"
ng-model="Name" ng-required="true">
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<input type="password" class="form-control" id="txtPassword" placeholder="Password"
ng-required="true" name="Password" ng-model="Password">
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
<input type="email" class="form-control" id="Email" placeholder="Email" name="Email"
ng-model="Email">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button ng-click="save()"> Save </button>
</td>
</tr>
</table>
</form>
</div>
在save()
函数中,我验证表单并发出警报,说明表单是有效还是无效。
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myControl", function ($scope, $http) {
$scope.save = function () {
if ($scope.myForm.$valid) {
alert('Valid');
} else {
alert('Invalid');
}
};
});
</script>
现在它将触发验证消息
输入姓名和密码并提交表单后,页面加载,但没有触发警报消息。
解决方案
我将假设它正在尝试调用表单的操作,这没什么,所以它会重新加载页面。您可以使用ng-submit来阻止默认操作。
var app = angular.module("myApp", []);
app.controller("myControl", function($scope, $http) {
$scope.save = function() {
if ($scope.myForm.$valid) {
alert('Valid');
} else {
alert('Invalid');
}
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myControl">
<form name="myForm" novalidate ng-submit="save()">
<table>
<tr>
<td>
Name
</td>
<td>
<input type="text" class="form-control" id="txtName" name="Name" placeholder="Name" ng-model="Name" ng-required="true">
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<input type="password" class="form-control" id="txtPassword" placeholder="Password" ng-required="true" name="Password" ng-model="Password">
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
<input type="email" class="form-control" id="Email" placeholder="Email" name="Email" ng-model="Email">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button type="submit"> Save </button>
</td>
</tr>
</table>
</form>
</div>
或者,如果您真的想保留ng-click
,可以在 save 方法中传递事件并在那里阻止它
var app = angular.module("myApp", []);
app.controller("myControl", function($scope, $http) {
$scope.save = function(e) {
e.preventDefault()
if ($scope.myForm.$valid) {
alert('Valid');
} else {
alert('Invalid');
}
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myControl">
<form name="myForm" novalidate>
<table>
<tr>
<td>
Name
</td>
<td>
<input type="text" class="form-control" id="txtName" name="Name" placeholder="Name" ng-model="Name" ng-required="true">
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<input type="password" class="form-control" id="txtPassword" placeholder="Password" ng-required="true" name="Password" ng-model="Password">
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
<input type="email" class="form-control" id="Email" placeholder="Email" name="Email" ng-model="Email">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button type="submit" ng-click="save($event)"> Save </button>
</td>
</tr>
</table>
</form>
</div>
推荐阅读
- bots - 编写 JSON 文件
- c# - 删除绑定后编辑文件
- angular - 使用 Oidc-Client.js 在 signinRedirectCallback 中没有响应状态
- javascript - 使用来自服务器的表单数据在客户端上获取响应
- python - 在 Pyspark 中使用 xgboost 会出现 ImportError: cannot import name 'JavaPredictionModel'
- javascript - 你会如何向孩子解释 React Context?
- overriding - 尝试在 Odoo 12 中覆盖(noupdate=1)电子邮件模板
- excel - Excel:当另一台计算机上的用户在单元格中输入日期时,格式转换为字符串
- python - Django 教程 - 运行“python manage.py xyz”时笔记本电脑 Django 出现问题 -> AttributeError: 'Choice' object has no attribute 'model'
- javascript - 如何在reactjs中单击时从数组中添加和删除元素?