AngularJS 神奇的表单

Angular 可使用指令无缝地增强标准表单元素的功能，我们将讨论它的优点，包括
数据绑定、建立模型属性、验证表单、验证表单后反馈信息、表单指令属性
下面我们通过案例验证他们的用法：
一、双向数据绑定（ng-model）和建立模型属性

<!DOCTYPE> <!-- use module --> <@H_301_13@html ng-app="exampleApp"> <@H_301_13@head> <@H_301_13@title>Angular Directive</@H_301_13@title> <@H_301_13@Meta charset="utf-8"/> <@H_301_13@link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <@H_301_13@link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> </@H_301_13@head> <@H_301_13@body> <!-- 案例：双向数据绑定 --> <@H_301_13@div class="panel" ng-controller="defaultCtrl"> <!-- 过滤complete为false的项 --> <@H_301_13@h3 class="panel-header">To Do List<@H_301_13@span class="label label-info">{{(todos | filter : {complete : 'false'}).length}}</@H_301_13@span></@H_301_13@h3> <@H_301_13@div class="row-fluid"> <@H_301_13@div class="col-xs-6"> <@H_301_13@div class="form-group row"> <@H_301_13@label for="action">Action: </@H_301_13@label> <!-- ng-model 双向绑定 --> <!-- 双向数据绑定：数据模型（Module）和视图（View）之间的双向绑定。 --> <!-- 当其中一方发送更替后，另一个也发生变化 --> <@H_301_13@input type="text" id="action" ng-model="newToDo.action" class="form-control"> </@H_301_13@div> <@H_301_13@div class="form-group row"> <@H_301_13@label for="location">Location: </@H_301_13@label> <@H_301_13@select id="location" class="form-control" ng-model="newToDo.location"> <@H_301_13@option>Home</@H_301_13@option> <@H_301_13@option>Office</@H_301_13@option> <@H_301_13@option>Mall</@H_301_13@option> </@H_301_13@select> </@H_301_13@div> <!-- ng-click点击Add添加项目 --> <@H_301_13@button class="btn btn-primary btn-block" ng-click="addNewItem(newToDo)">Add</@H_301_13@button> </@H_301_13@div> <@H_301_13@div class="col-xs-6"> <@H_301_13@table class="table table-bordered table-striped"> <@H_301_13@thead> <@H_301_13@tr><@H_301_13@th>#</@H_301_13@th><@H_301_13@th>Action</@H_301_13@th><@H_301_13@th>Done</@H_301_13@th></@H_301_13@tr> </@H_301_13@thead> <@H_301_13@tbody> <@H_301_13@tr ng-repeat="item in todos"> <!-- $index默认为0,递增 --> <@H_301_13@td>{{$index + 1}}</@H_301_13@td> <@H_301_13@td>{{item.action}}</@H_301_13@td> <@H_301_13@td> <@H_301_13@input type="checkBox" ng-model="item.complete"/> </@H_301_13@td> </@H_301_13@tr> </@H_301_13@tbody> </@H_301_13@table> </@H_301_13@div> </@H_301_13@div> </@H_301_13@div> <@H_301_13@script type="text/javascript" src="js/angular.min.js"></@H_301_13@script> <@H_301_13@script type="text/javascript"> // define a module named exampleApp angular.module("exampleApp",[]) // define a controller named defaultCtrl .controller('defaultCtrl',function ($scope) { // 数据模型 $scope.todos = [ { action : "play ball",complete : false },{ action : "singing",{ action : "running",complete : true },{ action : "dance",{ action : "swimming",{ action : "eating",]; // 添加数据到模型 $scope.addNewItem = function (newItem) { // 判断是否存在 if (angular.isDefined(newItem) && angular.isDefined(newItem.action) && angular.isDefined(newItem.location)) { $scope.todos.push({ action : newItem.action + " (" + newItem.location + ")",complete : false }) } } }) </@H_301_13@script> </@H_301_13@body> </@H_301_13@html>

首先定义了数据模型 $scope.todos和<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>数据到模型的addNewItem()<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>，接着使用双向数据绑定ng-model将视图中表单的action和location和模型中的$ scope.todos进行绑定，
最后通过ng-click点击属性触发添加数据到模型的addNewItem()方法完成操作

二、验证表单
在我们提交表单到服务器之前，我们需要来检测一下用户提交的数据是否存在或者是说合法，否则提交无用的数据会浪费资源。

<!DOCTYPE> <!-- use module --> <@H_301_13@html ng-app="exampleApp"> <@H_301_13@head> <@H_301_13@title>Angular Directive</@H_301_13@title> <@H_301_13@Meta charset="utf-8"/> <@H_301_13@link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <@H_301_13@link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> <@H_301_13@style> </@H_301_13@style> </@H_301_13@head> <@H_301_13@body> <@H_301_13@div id="todoPanel" class="panel" ng-controller="defaultCtrl"> <!-- novalidate表示抛弃浏览器自带的表单验证，用NG自己的验证 --> <!-- ng-submit="addUser(newUser) 当表单数据合法时,提交数据到模型 --> <@H_301_13@form name="myForm" novalidate ng-submit="addUser(newUser)"> <@H_301_13@div class="well"> <@H_301_13@div class="form-group"> <@H_301_13@label>Name:</@H_301_13@label> <!-- required 表该表单必填 --> <!-- ng-model="newUser.name" 双向数据绑定 --> <@H_301_13@input name="userName" type="text" class="form-control" required ng-model="newUser.name"> </@H_301_13@div> <@H_301_13@div class="form-group"> <@H_301_13@label>Email:</@H_301_13@label> <@H_301_13@input name="userEmail" type="email" class="form-control"required ng-model="newUser.email"> </@H_301_13@div> <@H_301_13@div class="checkBox"> <@H_301_13@label> <@H_301_13@input name="agreed" type="checkBox"ng-model="newUser.agreed" required> I agree to the terms and conditions </@H_301_13@label> </@H_301_13@div> <!-- g-disabled="myForm.$invalid" 当前面填写表单中的任意一项不合法时，该提交按钮都是不可用的 --> <@H_301_13@button type="submit" class="btn btn-primary btn-block" ng-disabled="myForm.$invalid"> OK </@H_301_13@button> </@H_301_13@div> <@H_301_13@div class="well"> Message: {{message}} <@H_301_13@div> Valid: {{myForm.$valid}} </@H_301_13@div> </@H_301_13@div> </@H_301_13@form> </@H_301_13@div> <@H_301_13@script type="text/javascript" src="js/angular.min.js"></@H_301_13@script> <@H_301_13@script type="text/javascript"> angular.module("exampleApp",[]) .controller("defaultCtrl",function ($scope) { // 添加用户数据到模型$scope.message $scope.addUser = function (userDetails) { $scope.message = userDetails.name + " (" + userDetails.email + ") (" + userDetails.agreed + ")"; } // 显示验证前后的结果 $scope.message = "Ready"; }); </@H_301_13@script> </@H_301_13@body> </@H_301_13@html>

首先定义了数据模型 $scope.message和<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>数据到模型的addUser()<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>，接着在视图中<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>表单元素validate、name<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>和ng-submit<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a> 随后使用双向数据绑定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 --> <@H_301_13@html ng-app="exampleApp"> <@H_301_13@head> <@H_301_13@title>Angular Directive</@H_301_13@title> <@H_301_13@Meta charset="utf-8"/> <@H_301_13@link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <@H_301_13@link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> <@H_301_13@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; } </@H_301_13@style> </@H_301_13@head> <@H_301_13@body> <!-- 案例：双向数据绑定 --> <@H_301_13@div class="panel" ng-controller="defaultCtrl"> <!-- novalidate="novalidate" 仅仅NG表单验证 --> <!-- ng-submit="addUser(newUser)" 添加数据到模型 --> <!-- ng-class="showValidation ? 'validate' : '' 当验证合法，showValidation为true，这是触发ng-class为validate --> <@H_301_13@form name="myForm" class="well" novalidate="novalidate" ng-submit="addUser(newUser)" ng-class="showValidation ? 'validate' : ''"> <@H_301_13@div class="form-group"> <@H_301_13@div class=" form-group"> <@H_301_13@label>Email: </@H_301_13@label> <@H_301_13@input name="email" type="email" class="form-control" required="required" ng-model="newUser.email"> <!-- 验证提示信息 --> <@H_301_13@div class="error"> <!-- 显示反馈信息 --> <@H_301_13@span ng-class="error" ng-show="showValidation"> {{getError(myForm.email.$error)}} </@H_301_13@span> </@H_301_13@div> </@H_301_13@div> <@H_301_13@button type="submit" class="btn btn-primary btn-block" >OK</@H_301_13@button> <@H_301_13@div class="well"> Message : {{message}} <!-- 当myForm.$valid验证合法，showValidation为true，这是触发ng-class为ng-valid，否则，ng-invalid --> <@H_301_13@div class="summary" ng-class="myForm.$valid ? 'ng-valid' : 'ng-invalid'" > Valid : {{myForm.$valid}} </@H_301_13@div> </@H_301_13@div> </@H_301_13@form> </@H_301_13@div> <@H_301_13@script type="text/javascript" src="js/angular.min.js"></@H_301_13@script> <@H_301_13@script type="text/javascript"> // define a module named exampleApp angular.module("exampleApp",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"; } } } }) </@H_301_13@script> </@H_301_13@body> </@H_301_13@html>

首先在style中定义反馈信息的样式、表单验证的样式
接着在JS中写入错误时反馈的信息
最后在视图中绑定ng-class

四、表单指令属性
1.使用input元素

<!DOCTYPE> <!-- use module --> <@H_301_13@html ng-app="exampleApp"> <@H_301_13@head> <@H_301_13@title>Angular Directive</@H_301_13@title> <@H_301_13@Meta charset="utf-8"/> <@H_301_13@link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <@H_301_13@link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> <@H_301_13@style> </@H_301_13@style> </@H_301_13@head> <@H_301_13@body> <@H_301_13@div class="panel" id="todoPanel" ng-controller="defaultCtrl"> <@H_301_13@form name="myForm" novalidate="novalidate"> <@H_301_13@div class="well"> <@H_301_13@div class="form-group"> <@H_301_13@label>Text: </@H_301_13@label> <!-- ng-required="requireValue" 通过数据绑定required值 --> <!-- ng-minlength="3" ng-maxlength="10" 允许最大最小字符--> <!-- ng-pattern="matchPattern" 正则匹配 --> <@H_301_13@input name="sample" class="form-control" ng-model="inputValue" ng-required="requireValue" ng-minlength="3" ng-maxlength="10" ng-pattern="matchPattern"> </@H_301_13@div> </@H_301_13@div> <@H_301_13@div class="well"> <!-- 必填 --> <@H_301_13@p>required Error: {{myForm.sample.$error.required}}</@H_301_13@p> <!-- 最小最大长度 --> <@H_301_13@p>Min Length Error: {{myForm.sample.$error.minlength}}</@H_301_13@p> <@H_301_13@p>Max Length Error: {{myForm.sample.$error.maxlength}}</@H_301_13@p> <!-- 只匹配小写字母 --> <@H_301_13@p>Pattern Error: {{myForm.sample.$error.pattern}}</@H_301_13@p> <!-- 验证合法 --> <@H_301_13@p>Element Valid: {{myForm.sample.$valid}}</@H_301_13@p> </@H_301_13@div> </@H_301_13@form> </@H_301_13@div> <@H_301_13@script type="text/javascript" src="js/angular.min.js"></@H_301_13@script> <@H_301_13@script type="text/javascript"> // define a module named exampleApp angular.module("exampleApp",function ($scope) { $scope.requireValue = true; $scope.matchPattern = new RegExp("^[a-z]"); }) </@H_301_13@script> </@H_301_13@body> </@H_301_13@html>

2.选择列表

<!DOCTYPE> <!-- use module --> <@H_301_13@html ng-app="exampleApp"> <@H_301_13@head> <@H_301_13@title>Angular Directive</@H_301_13@title> <@H_301_13@Meta charset="utf-8"/> <@H_301_13@link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <@H_301_13@link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> <@H_301_13@style> </@H_301_13@style> </@H_301_13@head> <@H_301_13@body> <@H_301_13@div class="panel" id="todoPanel" ng-controller="defaultCtrl"> <@H_301_13@form name="myForm" novalidate="novalidate"> <@H_301_13@div class="well"> <@H_301_13@div class="form-group"> <@H_301_13@label>Selection an action: </@H_301_13@label> <!-- 遍历列表 按照item.place排序 item.id as item.action 改变选项值--> <!-- ng-options="item.id as item.action group by item.place for item in todos" --> <@H_301_13@select ng-model="selectValue" ng-options="item.id as item.action group by item.place for item in todos"> <@H_301_13@option value="" class="">(Pick One)</@H_301_13@option> </@H_301_13@select> </@H_301_13@div> </@H_301_13@div> <@H_301_13@div class="well"> <@H_301_13@p>Selected: {{selectValue || "None"}}</@H_301_13@p> </@H_301_13@div> </@H_301_13@form> </@H_301_13@div> <@H_301_13@script type="text/javascript" src="js/angular.min.js"></@H_301_13@script> <@H_301_13@script type="text/javascript"> // define a module named exampleApp angular.module("exampleApp",function ($scope) { // 模型数据 $scope.todos = [ { id : 100,place : "School",action : "play ball",{ id : 200,place : "Home",action : "eating",{ id : 300,action : "watch TV",complete : true } ]; }) </@H_301_13@script> </@H_301_13@body> </@H_301_13@html>

AngularJS 神奇的表单

猜你在找的Angularjs相关文章