Angular form
参考 http://blog.xebia.com/2013/10/15/angularjs-validating-radio-buttons/
http://stackoverflow.com/questions/19632933/angularjs-group-check-box-validation
html
验证的require maxlength 等是根据 表单名.元素名
controller获取数据是根据ng-model
<form name="form1" class="form-group"
ng-class="{ 'has-error' : form1.username.$invalid && !form1.username.$pristine }">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required/>
<p ng-show="form1.username.$error.required" class="help-block">Tell us your Username</p>
<p ng-show="form1.username.$error.minlength" class="help-block">Username is too short.</p>
<p ng-show="form1.username.$error.maxlength" class="help-block">Username is too long.</p>
<br>
<label>Email</label>
<input class="form-control" type="email" ng-model="user.email" name="email" required/><br />
<p ng-show="form1.email.$error.required" class="help-block">Tell us your email.</p>
<p ng-show="form1.email.$error.email" class="help-block">email wrong.</p>
<label>Gender:</label>
<label class="radio" ng-repeat="gen in genders">
<input type="radio" ng-model="user.gender" name="gender" value="{{gen.id}}" required/><span>{{gen.text}}</span>
</label>
<label>Hobby:</label>
<label class="checkbox" ng-repeat="hobby in hobbies">
<input type="checkbox" ng-model="user.hobbies[hobby.id]" name="hobby" value="{{hobby.id}}" required/><span>{{hobby.text}}</span>
</label>
<p>自定义验证</p> <button ng-click="save(user)" class="btn btn-default">Submit</button>
<button ng-click="reset()" class="btn btn-default">reset</button>
</form>
<pre>form = {{user | json}}</pre>
<pre>saved = {{saved | json}}</pre>
controller
//测试form1
$scope.saved = {};
$scope.genders = [{id:'1',text:'male'},{id:'2',text:'female'}];
$scope.hobbies = [{id:'1',text:'haha'},{id:'2',text:'hehe'}];
$scope.save = function(user){
$scope.saved = angular.copy(user);
}
$scope.reset = function() {
console.log($scope.user);
$scope.user = angular.copy($scope.saved);
};
Angular form的更多相关文章
- 细说angular Form addControl方法
在本篇博文中,我们将接触angular的验证.angular的验证是由form 指令和ngModel协调完成的.今天博主在这里想要说的是在验证在的一种特殊情况,当验证控件没有没有name属性这是不会被 ...
- angular form 验证
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- angular form 验证 ngMessage
<!DOCTYPE HTML> <html ng-app="deliciousApp"> <head> <meta charset=&qu ...
- Angular - - form.FormController、ngModel.NgModelController
form.FormController FormController跟踪所有他所控制的和嵌套表单以及他们的状态,就像有效/无效或者脏值/原始. 每个表单指令创建一个FormController实例. ...
- [Angular Form] ngModel and ngModelChange
When using Radio button for Tamplate driven form, we want to change to the value change and preform ...
- angular form set dynamic control(form动态设置control)
实现效果 form表单控件的实时更新 效果如图 关键代码 validateForm: FormGroup; // 表单校验 constructor( private fb: FormBuilder ) ...
- angular(常识)
我觉得angularjs是前端框架,而jquery只是前端工具,这两个还是没有可比性的. 看知乎上关于jquery和angular的对比http://www.zhihu.com/question/27 ...
- 如何优雅的使用 Angular 表单验证
随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...
- [转]Angular: Hide Navbar Menu from Login page
本文转自:https://loiane.com/2017/08/angular-hide-navbar-login-page/ In this article we will learn two ap ...
随机推荐
- Java 中 静态方法与非静态方法的区别
静态方法和实例方法的区别主要体现在两个方面: 在外部调用静态方法时,可以使用"类名.方法名"的方式,也可以使用"对象名.方法名"的方式.而实例方法只有后面这种方 ...
- poj1323--贪心算法
题意:一群人打牌包括你,每人出一张牌,谁最大,谁就算赢一局,问你最少能赢几局? 给出人数N,每人的牌数M,及你的牌. 分析:1.这题需比较大小,就像我们打牌时要将牌排序以便出牌,显然要先将手上的牌进行 ...
- C++ Builder平台使用Indy9开发自动FTP程序01
Indy9与CB自带的Indy8不同处还是挺多的.首先就是图标变漂亮了,其次很多Method都重写了.它主要是依据Delph里的函数,力求与之相通.不同点在本系列的后续章节中会一一介绍. 在写ftp代 ...
- C语言——strlen()和sizeof的区别
strlen()和sizeof()的区别: strlen()——>C字符串库函数,返回字符串的真实长度.它是从内存某位置开始扫描,直到碰到结束符'\0'停止,返回计数器值. sizeof()—— ...
- Invalid signature file digest for Manifest main attributes
Solving a Spark error: Invalid signature file digest for Manifest main attributes When using spark-s ...
- avalon.js实践 svg地图配置工具
MVVM模式,在很多复杂交互逻辑下面,有很大的优势.现在相关的框架也很多,现在项目中使用了avalon.js,选择它的原因,是兼容性的考虑,当然也要支持下国内开发大牛,至于性能方面的,没有实际测试过, ...
- codeforces 10 D. LCIS LCIS O(n^2)算法
题目链接 给出两个序列, 求出他们的最长公共上升子序列. 两层循环, 内层循环j, 外层i. 如果a[i] == b[j], 那么dp[j] = max(dp[j], dp[best]+1), bes ...
- 源码学习之ASP.NET MVC Application Using Entity Framework
源码学习的重要性,再一次让人信服. ASP.NET MVC Application Using Entity Framework Code First 做MVC已经有段时间了,但看了一些CodePle ...
- 将String类型的数字字符转换成int
java.lang.Integer.parseInt(String) public static int parseInt(String s) throws NumberFormatException ...
- urllib2.URLError: <urlopen error [Errno 104] Connection reset by peer>
http://www.dianping.com/shop/8010173 File "综合商场1.py", line 152, in <module> httpC ...