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获得CheckBoxList选中的数量
Oct 27 Javascript
JQuery autocomplete 使用手册
Apr 01 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 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
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
javascript iframe编程相关代码
2009/12/28 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
Python中属性和描述符的正确使用
2016/08/23 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
抽象类和接口的区别
2012/09/19 面试题
公司部门司机岗位职责
2014/01/03 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL