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 28 Javascript
js鼠标左右键 键盘值小结
Jun 11 Javascript
探讨js中的双感叹号判断
Nov 11 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 Javascript
js 函数性能比较方法
Aug 24 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
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
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
PHP var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
php session的锁和并发
2016/01/22 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
如何快速上手Vuex
2017/02/14 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
微信小程序利用云函数获取手机号码
2019/12/17 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
多个python文件调用logging模块报错误
2020/02/12 Python
python logging设置level失败的解决方法
2020/02/19 Python
python 负数取模运算实例
2020/06/03 Python
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
Servlet方面面试题
2016/09/28 面试题
个人能力自我鉴赏
2014/01/25 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
小学生读书活动总结
2014/06/30 职场文书
安全责任书模板
2014/07/22 职场文书
结婚司仪主持词
2015/06/29 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL