การจัดการ Forms ด้วย AngularJS

Form ใน HTML นั้นถือว่าเป็นสิ่งหนึ่งที่ขาดไม่ได้หากเว็บไซด์นั้นๆ ต้องมีการเก็บข้อมูลต่างๆ. ใน AngularJS เองก็ยังมีฟังก์ชั่นมากมายเพื่อรองรับการจัดการ HTML Element ที่อยู่ใน Form เช่น

• input elements
• select elements
• button elements
• textarea elements

โดยมี Event ต่างๆที่รองรับ Form Elements เหล่านี้ เช่น

• 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 เพื่อ reset ข้อมูล เช่น

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<input name="firstname" ng-model="firstName" required="" type="text"> <input name="lastname" ng-model="lastName" required="" type="text"> <input name="email" ng-model="email" required="" type="email"> <button ng-click="reset()">Reset</button>   <script>    function studentController($scope) {       $scope.reset = function(){          $scope.firstName = "Mahesh";          $scope.lastName = "Parashar";          $scope.email = "MaheshParashar@tutorialspoint.com";       }       $scope.reset();    } </script>

นอกจาก Event แล้วยังมีฟังก์ชั่นสำหรับ Client Side Validate อีกด้วย เช่น

• $dirty − เชคสถานะของ Field ว่ามีการเปลี่ยนแปลงแล้ว. 
• $invalid − เชคความถูกต้องของข้อมูลที่ป้อนกรณีไม่ถูกต้อง. 
• $error − เชค Error.

ตัวอย่าง

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

<h2><span>AngularJS Sample Application</span></h2> <div ng-app="mainApp" ng-controller="studentController">     <form name="studentForm" novalidate="">         <table border="0">             <tbody>                 <tr>                     <td>Enter first name:</td>                     <td>                         <input name="firstname" ng-model="firstName" required="" type="text">                         <span ng-show="studentForm.firstname.$dirty && studentForm.firstname.$invalid" style="color: red;"></span>                         <span ng-show="studentForm.firstname.$error.required">First Name is required.</span>                                               </td>                 </tr>                 <tr>                     <td>Enter last name: </td>                     <td>                         <input name="lastname" ng-model="lastName" required="" type="text">                         <span ng-show="studentForm.lastname.$dirty && studentForm.lastname.$invalid" style="color: red;"></span>                         <span ng-show="studentForm.lastname.$error.required">Last Name is required.</span>                     </td>                 </tr>                 <tr>                     <td>Email: </td>                     <td>                         <input length="100" name="email" ng-model="email" required="" type="email">                         <span ng-show="studentForm.email.$dirty && studentForm.email.$invalid" style="color: red;"></span>                         <span ng-show="studentForm.email.$error.required">Email is required.</span>                         <span ng-show="studentForm.email.$error.email">Invalid email address.</span>                     </td>                 </tr>                 <tr>                     <td>                         <button ng-click="reset()">Reset</button>                     </td>                     <td>                         <button ng-click="submit()" ng-disabled="studentForm.firstname.$dirty &&                   studentForm.firstname.$invalid || studentForm.lastname.$dirty &&                   studentForm.lastname.$invalid || studentForm.email.$dirty &&                   studentForm.email.$invalid">Submit</button>                     </td>                 </tr>             </tbody>         </table>     </form> </div> <style> table, th, td {     border: 1px solid grey;     border-collapse: collapse;     padding: 5px; }   table tr:nth-child(odd) {     background-color: #f2f2f2; }   table tr:nth-child(even) {     background-color: #ffffff; } </style> <script> var mainApp = angular.module("mainApp", []);   mainApp.controller('studentController', function($scope) {     $scope.reset = function() {         $scope.firstName = "Nopphanan";         $scope.lastName = "Mayoe";         $scope.email = "Nopphanan7@gmail.com";     }       $scope.reset(); }); </script>

ผลลัพธ์

กรณีไม่ป้อนข้อมูล

กรณีป้อนข้อมูลผิด

กรณีกดปุ่ม Reset

About Nop

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.