AngularJS ให้การเติมแบบฟอร์มและการตรวจสอบที่หลากหลาย เราสามารถใช้ NG-click เพื่อจัดการเหตุการณ์คลิกปุ่ม AngularJs จากนั้นใช้ธง $ Dirty และ $ INVALID เพื่อตรวจสอบ ใช้การประกาศแบบฟอร์ม novalidate เพื่อห้ามการตรวจสอบเฉพาะเบราว์เซอร์ การควบคุมแบบฟอร์มใช้กิจกรรมมุมมาก ลองมาดูเหตุการณ์อย่างรวดเร็วก่อน
เหตุการณ์
AngularJS มีหลายเหตุการณ์ที่สามารถเชื่อมโยงกับการควบคุม HTML ตัวอย่างเช่น NG-click มักจะเชื่อมโยงกับปุ่ม ต่อไปนี้เป็นเหตุการณ์ที่สนับสนุนโดย AngularJS
คลิกที่
คลิกที่ NG-DBL
ng-mousedown
NG-Mouseup
ng-mouseenter
ng-mouseleave
นคร
Ng-Mouseover
ng-keydown
ng-keyup
ng-keypress
การเปลี่ยนแปลง
คลิกที่
ใช้คำสั่งเพื่อคลิกปุ่มเพื่อรีเซ็ตข้อมูล
<อินพุตชื่อ = "firstName" type = "text" ng-model = "firstName" ต้องการ> <ชื่ออินพุต = "LastName" type = "text" ng-model = "LastName" ต้องการ> <input name = "email" type = "อีเมล" ng-model = "อีเมล" $ scope.reset = function () {$ scope.firstname = "Mahesh"; $ scope.lastName = "parashar"; $ scope.email = "[email protected]"; } $ scope.reset ();} </script>ตรวจสอบข้อมูล
สามารถใช้ข้อผิดพลาดในการติดตามต่อไปนี้
$ Dirty - ข้อกำหนดมีการเปลี่ยนแปลง
$ ไม่ถูกต้อง-สถานะของค่านี้ไม่ถูกต้อง
$ ERROR- ระบุข้อผิดพลาดที่แน่นอน
ตัวอย่าง
ตัวอย่างต่อไปนี้จะแสดงคำแนะนำทั้งหมดข้างต้น
testangularjs.html
<Html> <head> <title> รูปแบบ js เชิงมุม </title> <style> ตาราง, th, td {border: 1px solid grey; การล่มสลายของชายแดน: การล่มสลาย; Padding: 5px;} ตาราง tr: nth-child (คี่) {พื้นหลัง-สี: #f2f2f2;} ตาราง tr: nth-child (แม้) {พื้นหลังสี: #ffffff;} </style> </head> <body> <h2> แอปพลิเคชันตัวอย่าง name = "studentform" novelidate> <table> <tr> <td> ป้อนชื่อแรก: </td> <td> <ชื่ออินพุต = "firstName" type = "text" ng-model = "FirstName" ต้องการ> <span style = "สีแดง" ng-show = "studentform.firstname ng-show = "studentform.firstname. $ error.urequired"> ชื่อแรกจำเป็นต้องใช้ </span> </span> </td> </tr> <tr> <td> ป้อนนามสกุล: </td> <td> <input name = "LastName" type = "text" ng-model = "LastName" LastName " && studentform.lastName. $ ไม่ถูกต้อง "> <span ng-show =" studentform.lastName. $ error.Required "> ชื่อสุดท้ายจำเป็นต้องใช้ </span> </span> </td> </tr> <tr> <td> อีเมล" ng-show = "studentform.email. $ dirty && studentform.email. $ ไม่ถูกต้อง"> <span ng-show = "studentform.email. $ error.erequired"> อีเมลจำเป็นต้องใช้ </span> <span ng-show = "studentform.email. $ error.email.email"> ng-click = "reset ()"> รีเซ็ต </button> </td> <td> <ปุ่ม ng-disabled = "studentform.firstname. $ dirty && studentform.firstname. $ invalid || studentform.lastname studentForm.Email. $ ไม่ถูกต้อง "ng-click =" subment () "> ส่ง </button> </td> </tr> </table> </table> </form> </div> <script> ฟังก์ชั่น StudentController ($ scope) {$ scope.reset = function () {$ scope. "[email protected]"; } $ scope.reset ();} </script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"เอาท์พุท
เปิด textangularjs.html ในเว็บเบราว์เซอร์ ผลลัพธ์มีดังนี้
ข้างต้นคือการเรียงลำดับความรู้ของรูปแบบ AngularJs เราจะเพิ่มความรู้ที่เกี่ยวข้องต่อไปในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!