代码下载：https://files.cnblogs.com/files/xiandedanteng/angularjsChangeFormClass.rar
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html ng-app="notesApp"> <head> <title> New Document </title> <style> .username.ng-valid{ background-color:lightgreen; } .username.ng-dirty.ng-invalid-required{ background-color:red; } .username.ng-dirty.ng-invalid-minlength{ background-color:lightpink; } </style> <meta charset="utf-8"> <script src="angular1.4.6.min.js"></script> </head> <body ng-controller="MainCtrl as ctrl"> <form ng-submit="ctrl.submit()" name="myForm"> <table> <tr> <td><input type="text" class="username" name="uname" ng-model="ctrl.user.username" required ng-minlength="4"/></td> <td> <span ng-show="myForm.uname.$error.required">This a required field</span> <span ng-show="myForm.uname.$error.minlength">Minimum length required is 4</span> <span ng-show="myForm.uname.$invalid">This field is invalid</span> </td> </tr> <tr> <td><input type="password" name="pwd" ng-model="ctrl.user.password" required/></td> <td> <span ng-show="myForm.pwd.$error.required">This a required field</span> </td> </tr> <tr> <td><input type="submit" value="Submit" ng-disabled="myForm.$invalid"/></td> <td> </tr> </table> </form> </body> </html> <script type="text/javascript"> <!-- angular.module('notesApp',[]) .controller('MainCtrl',[function(){ var self=this; self.submit=function(){ console.log("Username="+self.user.username+" Password="+self.user.password); alert("Form submitted."); }; }]); //--> </script>
效果：
本文转自张昺华-sky博客园博客，原文链接：http://www.cnblogs.com/xiandedanteng/p/7418479.html，如需转载请自行联系原作者
