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 用记忆函数快速计算递归函数
Mar 15 Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
50个比较实用jQuery代码段
Sep 18 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
分享5个好用的javascript文件上传插件
Sep 16 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 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
使用php判断网页是否gzip压缩
2013/06/25 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
js右键菜单效果代码
2007/07/21 Javascript
javascript 动态加载 css 方法总结
2009/07/11 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
python实现的简单文本类游戏实例
2015/04/28 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
销售人员中英文自荐信
2013/09/22 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
离职保密承诺书
2014/05/28 职场文书
校运动会广播稿300字
2014/10/07 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技