AngularJS 总结 (Form)
Forms
为了让form以及控件、ngModel富有样式，可以增加以下class：
通过在元素上添加repuired等验证指令 angularjs自动更具状态切换这些class
-
ng-valid (验证成功)
-
ng-invalid （验证失败）
-
ng-pristine(从未输入过)
-
ng-dirty(输入国)
在angular中，表单是FormController的一个实例。表单实例可以随意地使用name属性暴露到scope中（只可意会，不可言传啊。。）
<!DOCTYPE HTML> <html ng-app="ControlState"> <head> <meta charset="UTF-8"> <title>ControlState</title> <style type="text/css"> .ng-cloak { display: none; } .css-form input.ng-invalid.ng-dirty { background-color: #fa787e; } .css-form input.ng-valid.ng-dirty { background-color: #78fa89; } </style> </head> <body> <div ng-controller="MyCtrl"> <form novalidate name="formName"> 名字: <input ng-model="user.name" name="userName" type="text" required><br/> <div ng-show="formName.userName.$dirty&&formName.userName.$invalid"> <span>请填写名字</span> </div> Email: <input ng-model="user.email" name="userEmail" type="email" required><br/> <div ng-show="formName.userEmail.$dirty && formName.userEmail.$invalid">提示: <span ng-show="formName.userEmail.$error.required">请填写Email</span> <span ng-show="formName.userEmail.$error.email">这不是一个有效的Email</span> </div> 性别: <input value="男" ng-model="user.gender" type="radio">男 <input value="女" ng-model="user.gender" type="radio">女 <br/> <input type="checkbox" ng-model="user.agree" name="userAgree" required/>我同意： <input type="text" ng-show="user.agree" ng-model="user.agreeSign" required/> <br/> <div ng-show="!formName.userAgree || !user.agreeSign">请同意并签名~</div> <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button> <button ng-click="update(user)" ng-disabled="formName.$invalid || isUnchanged(user)">SAVE</button> </form> <pre>form = {{user | json}}</pre> <pre>saved = {{saved | json}}</pre> </div> <script src="../angular-1.0.1.js" type="text/javascript"></script> <script type="text/javascript"> var app = angular.module("ControlState", []); app.controller("MyCtrl", function ($scope,$window) { $scope.saved = {}; $scope.update = function(user) { $scope.saved = angular.copy(user); }; $scope.reset = function() { $scope.user = angular.copy($scope.saved); }; $scope.isUnchanged = function(user) { return angular.equals(user, $scope.saved); }; $scope.reset(); }); </script> </body> </html> custrom Validation
-
Model到View更新 无论什么时候Model发生改变，所有的ngModelController.$formatters(model发生改变时触发数据有效验证和格式化转变)数组中的function将排队执行，所以在这里每一个function都有机会去格式化model的值，并且通过NgModelController.$setValidity修改空间的验证状态。
-
View到Model更新 无论任何时候用户与控件发生交互，将会触发NgModelCtroller.$setViewValue。这时候轮到执行NgModelController.$parsers(当控件从dom取值之后，将会执行这个数组中的所有方法，对值进行审查过滤或转换，也进行验证)数组中的所有方法。
在下面的例子中我们将创建两个directive。
-
第一个是integer，它负责验证输入到底是不是一个有效的整数。例如1.23是一个非法的值，因为它包含小数部分。注意，我们通过在数组头部插入（unshift）来代替在尾部插入（push），这因为我们想它首先执行并使用这个控件的值（估计这个Array是当作队列来使用的），我们需要在转换发生之前执行验证函数。
-
第二个directive是smart-float。他将”1.2”和”1,2”转换为一个合法的浮点数”1.2”。注意，我们在这不可以使用HTML5的input类型”number”，因为浏览器不允许用户输入我们预期的非法字符，如”1,2”（它只认识”1.2”）。
<!DOCTYPE HTML> <html ng-app="CustomValidation"> <head> <meta charset="UTF-8"> <title>CustomValidation</title> <style type="text/css"> .ng-cloak { display: none; } .css-form input.ng-invalid.ng-dirty { background-color: #fa787e; } .css-form input.ng-valid.ng-dirty { background-color: #78fa89; } </style> </head> <body> <div> <form novalidate name="formName"> <div> 大小(整数 0 - 10):<input integer type="number" ng-model="size" name="size" min="0" max="10"/>{{size}}{{formName.size.$error.integer}}<br/> <span ng-show="formName.size.$error.integer">这不是一个有效的整数</span> <span ng-show="formName.size.$error.min || formName.size.$error.max"> 数值必须在0到10之间 </span> </div> <div> 长度（浮点数）： <input type="text" ng-model="length" name="length" smart-float/> {{length}}<br/> <span ng-show="formName.length.0error.float">这不是一个有效的浮点数</span> </div> </form> </div> <script src="../angular-1.0.1.js" type="text/javascript"></script> <script type="text/javascript"> var app = angular.module("CustomValidation", []); var INTEGER_REGEXP = /^\-?\d*$/; app.directive("integer", function () { return { require:"ngModel",//NgModelController link:function(scope,ele,attrs,ctrl) { //View - >Model的更新 ctrl.$parsers.unshift(function (viewValue) { //model -> view的更新吗?? //console.log(viewValue, '++'); if(INTEGER_REGEXP.test(viewValue)) { ctrl.$setValidity("integer", true); return viewValue; }else { ctrl.$setValidity("integer", false); return undefined; } }); } }; }); var FLOAT_REGEXP = /^\-?\d+(?:[.]\d+)?$/; app.directive("smartFloat", function () { return { require:"ngModel", link:function(scope,ele,attrs,ctrl) { ctrl.$parsers.unshift(function(viewValue) { if(FLOAT_REGEXP.test(viewValue)) { ctrl.$setValidity("float", true); return parseFloat(viewValue); }else { ctrl.$setValidity("float", false); return undefined; } }); } } }); </script> </body> </html> angular实现了所有HTML的基础控件（input，select，textarea），能胜任大多数场景。然而，如果我们需要更加灵活，我们可以通过编写一个directive来实现自定义表单控件的目的。
为了制定控件和ngModel一起工作，并且实现双向数据绑定，它需要：
-
实现render方法，是负责在执行完并通过所有NgModelController.$formatters方法后，呈现数据的方法。
-
调用$setViewValue方法，无论任何时候用户与控件发生交互，model需要进行响应的更新。这通常在DOM事件监听器里实现。
<!DOCTYPE HTML> <html ng-app="CustomControl"> <head> <meta charset="UTF-8"> <title>CustomControl</title> <style type="text/css"> .ng-cloak { display: none; } div[contenteditable] { cursor: pointer; background-color: #D0D0D0; } </style> </head> <body ng-controller="MyCtrl"> <div> <div contenteditable="true" ng-model="content" title="点击后编辑">My Little Dada</div> <pre>model = {{content}}</pre> <button ng-click="reset()">reset model tirgger model to view($render)</button> </div> <script src="../angular-1.0.1.js" type="text/javascript"></script> <script type="text/javascript"> var app = angular.module("CustomControl", []); app.controller("MyCtrl", function ($scope) { $scope.reset = function() { $scope.content = "My Little Dada"; }; }); app.directive("contenteditable", function () { return { require:"ngModel", link:function (scope, ele, attrs, ctrl) { //view -> model ele.bind("blur keyup",function() { scope.$apply(function() { console.log("setViewValue"); ctrl.$setViewValue(ele.text()); }); }); //model -> view ctrl.$render = function() { //当根scope的model发生改变时 $render触发（00！）我这么认为 ele.html(scope.content); }; //读取初始值 ctrl.$setViewValue(ele.text()); } }; }); </script> </body> </html> 来自：http://my.oschina.net/felumanman/blog/330624
本文由用户 jopen 自行上传分享，仅供网友学习交流。所有权归原作者，若您的权利被侵害，请联系管理员。
转载本站原创文章，请注明出处，并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台，欢迎各类分享！