夏日博客

A-A+

AngularJS表单操作几个例子(表单提交,表单编辑默认值)

2016年01月08日 前端设计 暂无评论 阅读 8 views 次

听同事讲AngularJS比jquery还要强大一些于时就开始了AngularJS学习工作，但在学习AngularJS中发现对于表单提交与表单默认值都不会搞，下面来看看几个关于AngularJS Form的案例吧。

模仿着我要搞了个AngularJS Form，但是问题来了。。。。

发现初始化时候ng-model 跟 input 标签里的 value 不默契，冲突。。

后来想再AngularJS controller 里预先赋值 $scope.formData = {‘name':’张三’};

可以通过php程序把值赋到这个AngularJS controller里,代码如下:

  1. <!-- AngularJS controller -->  
  2. <script>  
  3.     var formApp = angular.module('formApp', []);  
  4.     function formController($scope, $http) {  
  5.         $scope.formData = {'name':'张三','remark':'备注'};  
  6.         $scope.myForm = function() {  
  7.             $http({  
  8.                 method  : 'POST',  
  9.                 url     : '/role/edit',  
  10.                 data    : $.param($scope.formData),  // pass in data as strings  
  11.                 headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)  
  12.             })  
  13.                 .success(function(data) {  
  14.                     console.log(data);  
  15.                     if (!data.success) {  
  16.                     } else {  
  17.                     }  
  18.                 });  
  19.         };  
  20.     }  
  21. </script>  
  22.   
  23. <!--对应form里的input调整-->代码如下:  
  24.   
  25. <input type="text" name="name" ng-model="formData.name" class="form-control" placeholder="Role Name">  

后来又搜啊搜 发现还有其他办法，这么个东东 ng-init=”formData.name=’张三'”,代码如下:

  1. <input type="text" name="name" ng-model="formData.name" ng-init="formData.name='张三'" value="">  

好了，上面非常的简单，我们再来看

事件

AngularJS提供可与HTML控件相关联的多个事件。例如ng-click通常与按钮相关联。以下是AngularJS支持的事件。

ng-click

ng-dbl-click

ng-mousedown

ng-mouseup

ng-mouseenter

ng-mouseleave

ng-mousemove

ng-mouseover

ng-keydown

ng-keyup

ng-keypress

ng-change

ng-click

使用点击一个按钮的指令，表单重置数据,代码如下:

  1. <input name="firstname" type="text" ng-model="firstName" required>  
  2. <input name="lastname" type="text" ng-model="lastName" required>  
  3. <input name="email" type="email" ng-model="email" required>  
  4. <button ng-click="reset()">Reset</button>  
  5. <script>  
  6.    function studentController($scope) {   
  7.       $scope.reset = function(){  
  8.          $scope.firstName = "Mahesh";  
  9.          $scope.lastName = "Parashar";  
  10.          $scope.email = "MaheshParashar@yiibai.com";  
  11.   }     
  12.    $scope.reset();  
  13. }  
  14. </script>  

验证数据

可使用下面跟踪误差。

$dirty - 规定值已被改变。

$invalid- 该值的状态是无效的。

$error- 指出确切的错误。

例子

下面的例子将展示上述所有指令,代码如下:

testAngularJS.html

  1. <html>  
  2. <head>  
  3. <title>Angular JS Forms</title>  
  4. <style>  
  5. table, th , td {  
  6.   border: 1px solid grey;  
  7.   border-collapse: collapse;  
  8.   padding: 5px;  
  9. }  
  10. table tr:nth-child(odd) {  
  11.   background-color: #f2f2f2;  
  12. }  
  13. table tr:nth-child(even) {  
  14.   background-color: #ffffff;  
  15. }  
  16. </style>  
  17. </head>  
  18. <body>  
  19. <h2>AngularJS Sample Application</h2>  
  20. <div ng-app="" ng-controller="studentController">  
  21. <form name="studentForm" novalidate>  
  22. <table border="0">  
  23. <tr><td>Enter first name:</td><td><input name="firstname" type="text" ng-model="firstName" required>  
  24.    <span style="color:red" ng-show="studentForm.firstname.$dirty && studentForm.firstname.$invalid">  
  25.       <span ng-show="studentForm.firstname.$error.required">First Name is required.</span>  
  26.    </span>  
  27. </td></tr>  
  28. <tr><td>Enter last name: </td><td><input name="lastname"  type="text" ng-model="lastName" required>  
  29.    <span style="color:red" ng-show="studentForm.lastname.$dirty && studentForm.lastname.$invalid">  
  30.       <span ng-show="studentForm.lastname.$error.required">Last Name is required.</span>  
  31.    </span>  
  32. </td></tr>  
  33. <tr><td>Email: </td><td><input name="email" type="email" ng-model="email" length="100" required>  
  34. <span style="color:red" ng-show="studentForm.email.$dirty && studentForm.email.$invalid">  
  35.       <span ng-show="studentForm.email.$error.required">Email is required.</span>  
  36.    <span ng-show="studentForm.email.$error.email">Invalid email address.</span>  
  37.    </span>  
  38. </td></tr>  
  39. <tr><td><button ng-click="reset()">Reset</button></td><td><button   
  40.  ng-disabled="studentForm.firstname.$dirty && studentForm.firstname.$invalid ||  
  41.      studentForm.lastname.$dirty && studentForm.lastname.$invalid ||  
  42.      studentForm.email.$dirty && studentForm.email.$invalid"  
  43.  ng-click="submit()">Submit</button></td></tr>  
  44. </table>  
  45. </form>  
  46. </div>  
  47. <script>  
  48. function studentController($scope) {   
  49.    $scope.reset = function(){  
  50.   $scope.firstName = "Mahesh";  
  51.   $scope.lastName = "Parashar";  
  52.   $scope.email = "MaheshParashar@yiibai.com";  
  53.    }     
  54.    $scope.reset();  
  55. }  
  56. </script>  
  57. <script src="angular.min.js"></script>  
  58. </body>  
  59. </html>  

AngularJS表单操作几个例子(表单提交,表单编辑默认值)

在Web浏览器打开textAngularJS.html。看到结果如下。

常用的表单验证指令

1. 必填项验证

某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：

  1. <input type="text" required />   

2. 最小长度

验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"：

  1. <input type="text" ng-minlength="5" />  

3. 最大长度

验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxlength="{number}"：

  1. <input type="text" ng-maxlength="20" />  

4. 模式匹配

使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式：

  1. <input type="text" ng-pattern="/[a-zA-Z]/" />  

5. 电子邮件

验证输入内容是否是电子邮件，只要像下面这样将input的类型设置为email即可：

  1. <input type="email" name="email" ng-model="user.email" />  

6. 数字

验证输入内容是否是数字，将input的类型设置为number：

  1. <input type="number" name="age" ng-model="user.age" />  

7. URL

验证输入内容是否是URL，将input的类型设置为 url：

  1. <input type="url" name="homepage" ng-model="user.facebook_url" />  
标签：

给我留言