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 相关文章推荐
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
Jquery判断IE6等浏览器的代码
Apr 05 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 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
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
php自动加载方式集合
2016/04/04 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
python实现的文件同步服务器实例
2015/06/02 Python
Python线程指南详细介绍
2017/01/05 Python
用tensorflow实现弹性网络回归算法
2018/01/09 Python
Python中如何导入类示例详解
2019/04/17 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
智能室内花园:Click & Grow
2021/01/29 全球购物
中海讯通笔试题
2015/09/15 面试题
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
本溪水洞导游词
2015/02/11 职场文书
《月光曲》教学反思
2016/02/16 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL