参考 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的更多相关文章

  1. 细说angular Form addControl方法

    在本篇博文中,我们将接触angular的验证.angular的验证是由form 指令和ngModel协调完成的.今天博主在这里想要说的是在验证在的一种特殊情况,当验证控件没有没有name属性这是不会被 ...

  2. angular form 验证

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. angular form 验证 ngMessage

    <!DOCTYPE HTML> <html ng-app="deliciousApp"> <head> <meta charset=&qu ...

  4. Angular - - form.FormController、ngModel.NgModelController

    form.FormController FormController跟踪所有他所控制的和嵌套表单以及他们的状态,就像有效/无效或者脏值/原始. 每个表单指令创建一个FormController实例. ...

  5. [Angular Form] ngModel and ngModelChange

    When using Radio button for Tamplate driven form, we want to change to the value change and preform ...

  6. angular form set dynamic control(form动态设置control)

    实现效果 form表单控件的实时更新 效果如图 关键代码 validateForm: FormGroup; // 表单校验 constructor( private fb: FormBuilder ) ...

  7. angular(常识)

    我觉得angularjs是前端框架,而jquery只是前端工具,这两个还是没有可比性的. 看知乎上关于jquery和angular的对比http://www.zhihu.com/question/27 ...

  8. 如何优雅的使用 Angular 表单验证

    随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...

  9. [转]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 ...

随机推荐

  1. Java 中 静态方法与非静态方法的区别

    静态方法和实例方法的区别主要体现在两个方面: 在外部调用静态方法时,可以使用"类名.方法名"的方式,也可以使用"对象名.方法名"的方式.而实例方法只有后面这种方 ...

  2. poj1323--贪心算法

    题意:一群人打牌包括你,每人出一张牌,谁最大,谁就算赢一局,问你最少能赢几局? 给出人数N,每人的牌数M,及你的牌. 分析:1.这题需比较大小,就像我们打牌时要将牌排序以便出牌,显然要先将手上的牌进行 ...

  3. C++ Builder平台使用Indy9开发自动FTP程序01

    Indy9与CB自带的Indy8不同处还是挺多的.首先就是图标变漂亮了,其次很多Method都重写了.它主要是依据Delph里的函数,力求与之相通.不同点在本系列的后续章节中会一一介绍. 在写ftp代 ...

  4. C语言——strlen()和sizeof的区别

    strlen()和sizeof()的区别: strlen()——>C字符串库函数,返回字符串的真实长度.它是从内存某位置开始扫描,直到碰到结束符'\0'停止,返回计数器值. sizeof()—— ...

  5. Invalid signature file digest for Manifest main attributes

    Solving a Spark error: Invalid signature file digest for Manifest main attributes When using spark-s ...

  6. avalon.js实践 svg地图配置工具

    MVVM模式,在很多复杂交互逻辑下面,有很大的优势.现在相关的框架也很多,现在项目中使用了avalon.js,选择它的原因,是兼容性的考虑,当然也要支持下国内开发大牛,至于性能方面的,没有实际测试过, ...

  7. codeforces 10 D. LCIS LCIS O(n^2)算法

    题目链接 给出两个序列, 求出他们的最长公共上升子序列. 两层循环, 内层循环j, 外层i. 如果a[i] == b[j], 那么dp[j] = max(dp[j], dp[best]+1), bes ...

  8. 源码学习之ASP.NET MVC Application Using Entity Framework

    源码学习的重要性,再一次让人信服. ASP.NET MVC Application Using Entity Framework Code First 做MVC已经有段时间了,但看了一些CodePle ...

  9. 将String类型的数字字符转换成int

    java.lang.Integer.parseInt(String) public static int parseInt(String s) throws NumberFormatException ...

  10. urllib2.URLError: <urlopen error [Errno 104] Connection reset by peer>

    http://www.dianping.com/shop/8010173 File "综合商场1.py", line 152, in <module>    httpC ...