AngularJS表单详解及示例代码


Posted in Javascript onAugust 17, 2016

AngularJS提供丰富填写表单和验证。我们可以用ng-click来处理AngularJS点击按钮事件,然后使用 $dirty 和 $invalid标志做验证的方式。使用novalidate表单声明禁止任何浏览器特定的验证。表单控件使用了大量的角活动。让我们快速浏览一下有关事件先。

事件

AngularJS提供可与HTML控件相关联的多个事件。例如ng-click通常与按钮相关联。以下是AngularJS支持的事件。

ng-click

ng-dbl-click

ng-mousedown

ng-mouseup

ng-mouseenter

ng-mouseleave

ng-mousemove

ng-mouseover

ng-keydown

ng-keyup

ng-keypress

ng-change

ng-click

使用点击一个按钮的指令,表单重置数据。

<input name="firstname" type="text" ng-model="firstName" required>
<input name="lastname" type="text" ng-model="lastName" required>
<input name="email" type="email" ng-model="email" required>
<button ng-click="reset()">Reset</button>
<script>
  function studentController($scope) { 
   $scope.reset = function(){
     $scope.firstName = "Mahesh";
     $scope.lastName = "Parashar";
     $scope.email = "MaheshParashar@yiibai.com";
 }  
  $scope.reset();
}
</script>

验证数据

可使用下面跟踪误差。

$dirty - 规定值已被改变。

$invalid- 该值的状态是无效的。

$error- 指出确切的错误。

例子

下面的例子将展示上述所有指令。

testAngularJS.html

<html>
<head>
<title>Angular JS Forms</title>
<style>
table, th , td {
 border: 1px solid grey;
 border-collapse: collapse;
 padding: 5px;
}
table tr:nth-child(odd) {
 background-color: #f2f2f2;
}
table tr:nth-child(even) {
 background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<form name="studentForm" novalidate>
<table border="0">
<tr><td>Enter first name:</td><td><input name="firstname" type="text" ng-model="firstName" required>
  <span style="color:red" ng-show="studentForm.firstname.$dirty && studentForm.firstname.$invalid">
   <span ng-show="studentForm.firstname.$error.required">First Name is required.</span>
  </span>
</td></tr>
<tr><td>Enter last name: </td><td><input name="lastname" type="text" ng-model="lastName" required>
  <span style="color:red" ng-show="studentForm.lastname.$dirty && studentForm.lastname.$invalid">
   <span ng-show="studentForm.lastname.$error.required">Last Name is required.</span>
  </span>
</td></tr>
<tr><td>Email: </td><td><input name="email" type="email" ng-model="email" length="100" required>
<span style="color:red" ng-show="studentForm.email.$dirty && studentForm.email.$invalid">
   <span ng-show="studentForm.email.$error.required">Email is required.</span>
	 <span ng-show="studentForm.email.$error.email">Invalid email address.</span>
  </span>
</td></tr>
<tr><td><button ng-click="reset()">Reset</button></td><td><button 
	ng-disabled="studentForm.firstname.$dirty && studentForm.firstname.$invalid ||
			 studentForm.lastname.$dirty && studentForm.lastname.$invalid ||
			 studentForm.email.$dirty && studentForm.email.$invalid"
	ng-click="submit()">Submit</button></td></tr>
</table>
</form>
</div>
<script>
function studentController($scope) { 
  $scope.reset = function(){
		$scope.firstName = "Mahesh";
		$scope.lastName = "Parashar";
		$scope.email = "MaheshParashar@yiibai.com";
  }  
  $scope.reset();
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

输出

在Web浏览器打开textAngularJS.html。看到结果如下。

AngularJS表单详解及示例代码

以上就是AngularJS表单的知识整理,后续继续补充相关知识,谢谢大家对本站的支持!

Javascript 相关文章推荐
[原创]用javascript实现检测指定目录是否存在的方法
Jan 12 Javascript
JavaScript 对象链式操作测试代码
Apr 25 Javascript
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
AngularJS模块详解及示例代码
Aug 17 #Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 #Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 #Javascript
AngularJS表格详解及示例代码
Aug 17 #Javascript
AngularJS过滤器详解及示例代码
Aug 16 #Javascript
AngularJS控制器详解及示例代码
Aug 16 #Javascript
AngularJS表达式讲解及示例代码
Aug 16 #Javascript
You might like
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
php cli换行示例
2014/04/22 PHP
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
linux 下实现python多版本安装实践
2014/11/18 Python
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
Python实现截屏的函数
2015/07/26 Python
python机器学习之随机森林(七)
2018/03/26 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
python实现代码统计程序
2019/09/19 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
高中生自我鉴定范文
2013/10/30 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
詹天佑教学反思
2014/04/30 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers