angularjs form简单入门
来源:互联网 发布:mac系统软件下载 编辑:程序博客网 时间:2024/05/22 10:45
Form 表单
在开始看angularjs如何处理表单前, 我们先想想处理表单时可能遇到的问题
1.如何数据绑定
2.验证表单element e.g. input select etc
3.显示出错信息
4.整个Form的验证
5.避免提交没有验证通过的表单
6.如果防止多次提交
form
如果我们引用了anuglajs, 在一个controller的scope下写了一个HTML的form, 其实我们已经在使用 angularjs 的 form directive 了。
下面两种html的写法都会调用 angularjs 的form directive, 并且可以用myForm引用这个 form, 来判断表单是否验证通过。
<form name="myForm"></form><ng-form name="myForm"></ng-form>
bind model 如何双向绑定
用 ng-model。 下面的代码把controler scope下的person的name和一个叫做 personName input 绑定到了一起
<form> <input name="personName" ng-model="person.name"/></form>
valid field 验证表单element, 显示出错信息
这里分两部分, 第一部分是angular自带的验证器, 另一部分是自己实现的验证器。 这里只介绍第一种情况。 第二个会在单独的文章里描述。
angularjs 自带了一些html5的验证, 比如: 必填项、email、url (到1.0.7)其实只有这 三个 !!!^ ^
用法一如既往的简单, 都是声明式的. 下面我们定义了一个input,名字叫做 personEmail, 要求必须有输入,而且输入的必须是一个email. 通过变量
myForm.personEmail.$valid
我们可以判定这个input的输入是否合法, 从而决定是否显示出错信息。
具体是那类错误可以通过
myForm.personEmail.$error
用法如下:
<form name="myForm"> <input name="personEmail" required type="email" ng-model="person.email"/> <span ng-show="!myForm.personEmail.$valid">有错</span> <span ng-show="myForm.personEmail.$error.required">必填</span> <span ng-show="myform.personEmail.$error.email">email 地址不对</span></form>
form.$invalid
用这个值可以控制提交按键的状态, 值允许valid的form可以提交.
<form name="myForm" ng-submit="save()"> <input name="personEmail" required type="email" ng-model="person.email"/> <span ng-show="!myForm.personEmail.$valid">有错</span> <span ng-show="myForm.personEmail.$error.required">必填</span> <span ng-show="myform.personEmail.$error.email">email 地址不对</span> <input name="personName" required/> <input type="submit" ng-disabled="myForm.$invalid"/></form>
提交的方法, 我们通过ng-submit 绑定到了controller里的save函数上。
form的简单使用就是这样了
注意!
在至少1.0.7下, input form的名字要用驼峰, 否则有问题。
- angularjs form简单入门
- AngularJS简单入门
- AngularJS简单入门案例
- AngularJS入门之简单的项目搭建
- jQuery的Form插件jquery.form.js的简单入门
- jQuery的Form插件的简单入门
- jquery的Form插件简单入门
- angularJs -- Form 随手笔记
- angularjs Form进阶
- AngularJS提交form(1)
- Angularjs ng-form
- angularJS form表单验证
- AngularJS入门
- AngularJS入门
- AngularJS 入门
- AngularJS入门
- AngularJs入门
- AngularJS入门
- iOS学习笔记-019.UIScrollView的基本属性和用法
- angular2-英雄指南教程http请求
- 捕获异常,手动让Spring事务回滚
- Android WebView视频全屏显示解决方案
- android RecyclerView+SwipeRefreshLayout
- angularjs form简单入门
- Linux mail 命令
- 29 JavaScript之BOM基础
- Kubernetes 1.5安装 小提示
- java DateUtil 工具类 总结
- iOS 获取当前控制器的顶层控制器
- js检测关闭页面或浏览器
- “==”和“equals” “JAVA”和“C”
- shell中>/dev/null 2>&1是什么鬼?