首先定义了数据模型scope.message和添加数据到模型的addUser()方法，接着在视图中添加表单元素validate、name属性和ng−submit属性随后使用双向数据绑定ng−model将视图中表单的action和location和模型中的 scope.todos进行绑定，且使用验证属性required和email表单
之后对提交按钮进行禁用，仅当表单数据全部合法才能用，不合法都禁用（ng-disabled=”myForm.$invalid”）
最后通过ng-submit属性提交数据到模型的addUser()方法完成操作
三、表单验证反馈信息
我们仅仅对表单进行验证是远远不够的，因为用户不知道为什么出错而感到困惑，因此我们需要反馈信息给用户，让他们明白该填写什么
先介绍一下NG中要验证的类
ng-pristine 用户没交互元素被添加到这个类
ng-dirty 用户交互过元素被添加到这个类
ng-valid 验证结果有效元素被添加到这个类
ng-invalid 验证结果无效元素被添加到这个类
<!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angular Directive</title> <meta charset="utf-8"/> <link type="text/css" href="https://www.jb51.net/css/bootstrap.min.css"> <link type="text/css" href="https://www.jb51.net/css/bootstrap-theme.min.css"> <style> /*交互且必填样式*/ form.validate .ng-invalid-required.ng-dirty { background-color: orange; } /*交互不合法样式*/ form .ng-invalid.ng-dirty { background-color: lightpink; } /*邮件不合法且交互过*/ form.validate .ng-invalid-email.ng-dirty { background-color: lightgoldenrodyellow; } div.error{ color: red; font-weight: bold; } div.summary.ng-valid{ color: green; font-weight: bold; } div.summary.ng-invalid{ color: red; font-weight: bold; } </style> </head> <body> <!-- 案例：双向数据绑定 --> <div ng-controller="defaultCtrl"> <!-- novalidate="novalidate" 仅仅NG表单验证 --> <!-- ng-submit="addUser(newUser)" 添加数据到模型 --> <!-- ng-class="showValidation ? 'validate' : '' 当验证合法，showValidation为true，这是触发ng-class为validate --> <form novalidate="novalidate" ng-submit="addUser(newUser)" ng-class="showValidation ? 'validate' : ''"> <div> <div> <label>Email: </label> <input type="email" required="required" ng-model="newUser.email"> <!-- 验证提示信息 --> <div> <!-- 显示反馈信息 --> <span ng-class="error" ng-show="showValidation"> {{getError(myForm.email.$error)}} </span> </div> </div> <button type="submit" >OK</button> <div> Message : {{message}} <!-- 当myForm.$valid验证合法，showValidation为true，这是触发ng-class为ng-valid，否则，ng-invalid --> <div ng-class="myForm.$valid ? 'ng-valid' : 'ng-invalid'" > Valid : {{myForm.$valid}} </div> </div> </form> </div> <script type="text/javascript" src="https://www.jb51.net/js/angular.min.js"></script> <script type="text/javascript"> // define a module named exampleApp angular.module("exampleApp", []) // define a controller named defaultCtrl .controller('defaultCtrl', function ($scope) { // 添加数据到模型 $scope.addUser = function (userDetails) { if (myForm.$valid) { $scope.message = userDetails.name + " (" + userDetails.email + ") (" + userDetails.agreed + ")"; } else { $scope.showValidation = true; } } // 数据模型 $scope.message = "Ready"; // 错误反馈信息 // 当没有填写信息时，提示Please enter a value // 当验证出错时，提示Please enter a valid email address $scope.getError = function (error) { if (angular.isDefined(error)) { if (error.required) { return "Please enter a value"; } else if (error.email) { return "Please enter a valid email address"; } } } }) </script> </body> </html>
首先在style中定义反馈信息的样式、表单验证的样式
接着在JS中写入错误时反馈的信息
最后在视图中绑定ng-class
四、表单指令属性
1.使用input元素