简单的表单
ngModel指令实现了双向的数据绑定,即模型和视图双向同步,同时它也为其他指令提供了API来扩展ngModel的行为。
<div ng-controller="ExampleController"> <form novalidate class="simple-form"> Name: <input type="text" ng-model="user.name" /><br /> E-mail: <input type="email" ng-model="user.email" /><br /> Gender: <input type="radio" ng-model="user.gender" value="male" />male <input type="radio" ng-model="user.gender" value="female" />female<br /> <input type="button" ng-click="reset()" value="Reset" /> <input type="submit" ng-click="update(user)" value="Save" /> </form> <pre>form = {{user | json}}</pre> <pre>master = {{master | json}}</pre> </div> <script> angular.module('formExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.master = {}; $scope.update = function(user) { $scope.master = angular.copy(user); }; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset(); }]); </script>
novalidate表明没有添加任何校验逻辑,在表单组定义了各种输入控件绑定到模型user的不同属性,当用户输入是会看到form信息不停的更新,点击“Save”按钮会把当前表单的值保存到master变量中,master信息会相应的更新, 点击"Reset"信息会重置表单的信息,即把之前保存的快照master赋值给user. 这里通过angular.copy函数做了深拷贝。
表单css样式
- ng-valid: 数据合法时的CSS样式
- ng-invalid: 数据不合法时的CSS样式
- ng-valid-[key]: 通过$setValidity指定的key合法时生效的样式
- ng-invalid-[key]: 通过$setValidity指定的key不合法时生效的样式
- ng-pristine: 未曾与表单控件交互时的样式
- ng-dirty: 与控件发生了交互后生效的样式
- ng-touched: 控件失去焦点的样式
- ng-untouched: 控件没有失去焦点时的样式
- ng-pending: 等待异步校验过程中的(in-progress)生效的样式
通过上述样式体现出来,user的name和email属性对应的控件加上了required属性, 当用户未输入name和email信息时会标红提示。
定制触发器更新模型
表单的每次输入都会触发与模型的同步和表单的校验。我们可以通过ngModelOptions指令改变模型同步和表单验证的触发条件。例如ng-model-options="{ updateOn: 'blur' }",会使Angular在输入控件失去焦点时更新模型或者进行校验。多个事件通过空白隔开,例如:
ng-model-options="{ updateOn: 'mousedown blur' }". 如果保持默认触.发条件并添加新的触发事件,加上“default”选项,
例如:ng-model-options="{ updateOn: 'default blur' }".
<div ng-controller="ExampleController"> <form> Name: <input type="text" ng-model="user.name" ng-model-options="{ updateOn: 'blur' }" /><br /> Other data: <input type="text" ng-model="user.data" /><br /> </form> <pre>username = "{{user.name}}"</pre> <pre>userdata = "{{user.data}}"</pre> </div>
angular.module('customTriggerExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.user = {}; }]);
相关推荐
AngularJS表单验证.
AngularJS是前端开发流行框架,本Demo展示了表单验证的意义,及实现方法,掌握Angular基础指令,通过不同的指令元素可以拥有不同功能,并通过指令与表单合作验证,从而实现表单验证的敏捷化开发。
主要介绍了AngularJS表单编辑提交功能实例,本文讲解如何修改表单的默认值,需要的朋友可以参考下
AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告。 注意:客户端的验证不能确保用户输入数据的安全,所以服务端的数据验证也是必须的。 1、HTML 控件 以下 HTML input 元素被称为 HTML ...
本文实例讲述了AngularJS表单验证功能。分享给大家供大家参考,具体如下: 在AngularJS的管辖下,每个表单form都会创建一个ngFormController的一个实例。在表单里面的每个input都会创建一个在这个实例下的...
NULL 博文链接:https://bijian1013.iteye.com/blog/2392684
本文实例讲述了AngularJS表单提交。分享给大家供大家参考,具体如下: AngularJS中的数据绑定 AngularJS创建实时模板来代替视图,而不是将数据合并进模板之后更新DOM。任何一个独立视图组件中的值都是动态替换的。 ...
本资料来源于github,可实现动态添加表单功能,代码简单,易学。不过需要在apache环境下运行。
本文实例为大家分享了AngularJS表单简单操作代码,供大家参考,具体内容如下 HTML正文: <!-- novalidate:当提交表单时不对表单数据(输入)进行验证 --> <form novalidate> First Name:<input ...
主要介绍了angularjs 表单密码验证自定义指令实现代码,需要的朋友可以参考下
本文主要介绍AngularJS表单的知识,这里整理了表单的基础知识和简单的示例代码,有需要的小伙伴可以参考下
主要为大家详细介绍了AngularJS表单验证功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
AngularJS表单验证 演示版 #目录 要求 jQuery的 AngularJS 浏览器支持 Chrome合金 火狐浏览器 快速配置 bower install sanji-validator 这会将bower_components -validator文件及其依赖项复制到bower_...
AngularJS 表单输入生成器指令为表单/输入提供一致、响应式的样式和验证。 使用 HTML 中的每个输入 1 行快速构建表单,而不是复制/粘贴每个输入控件的标签、输入、验证和样式。演示依赖关系可选的lesshat less-...
漂亮大气的bootstrap表单,angularJs表单验证 ,是angularJs入门很好的例子
主要介绍了AngularJs表单校验功能实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下