เนื้อหาในตอนนี้ จะเป็นการประยุกต์ใช้งาน สิ่งที่เราได้รู้
เกี่ยวกับ property formcontroller โดยจะใช้ในการสร้าง form
และตรวจสอบ form
บทความที่เกี่ยวข้องก่อนหน้า
ทบทวน property ของ formcontroller ใน angularjs ตอนที่ 6
https://www.ninenik.com/content.php?arti_id=528 via @ninenik
ภาคต่อ error property ของ formcontroller ใน angularjs ตอนที่ 7
https://www.ninenik.com/content.php?arti_id=529 via @ninenik
ก่อนเริ่ม ขอแนะนำ css ของ bootstrap ที่จะมีการใช้งาน
has-error เป็น css class ที่ใช้ร่วมกับ form-group สำหรับแสดงผล ส่วนของเนื้อหา หรือ element ที่อยู่ภายใน css นี้ ให้เป็นไปในลักษณะ การ hilight แจ้ง error
text-danger เป็น css class สำหรับใช้กับแท็ก span กำหนดการแสดงข้อความในลักษณะ การแจ้ง error
ดูโค้ดเกี่ยวกับการใช้งานกับ input type email ประกอบ
1 2 3 4 5 6 7 | <div class="form-group" ng-class="{'has-error': myForm.email.$invalid && !myForm.email.$pristine}"> <label class="control-label" for="email">Email :</label> <input type="email" class="form-control" name="email" ng-model="email" required /> <span ng-show="myForm.email.$error.required && !myForm.email.$pristine" class="text-danger"> Required</span> <span ng-show="myForm.email.$error.email" class="text-danger"> Not a Email</span> </div> |
จากโค้ดด้านบน ประกอบไปด้วย
div
label
input type email
span 2 อัน
ดูไปทีละตัว
1 2 3 | <div class="form-group">...</div> |
ตัวนี้จะคลุมด้านนอก ถ้ามีการเช็คก input type email แล้วเกิดข้อผิดพลาด
ก็จะถูก กำหนดให้ มี css class ชื่อ has-error เพื่มเข้ามา โดยเมื่อ css นี้เพิ่มเข้ามา
จะทำให้ส่วนต่างๆด้านใน แสดงในลักษณะแบบ error เช่น ข้อความเป็นสีแดง
input type มี hilight ขอบเป็นสีแดง แบบนี้เป็นต้น
1 2 3 | <div class="form-group has-error"></div> |
โค้ดด้านบนที่มีการเพิ่ม css เข้ามา ได้มาจากการใช้งาน ng-class directive
1 2 3 | <div class="form-group" ng-class="{'has-error': myForm.email.$invalid && !myForm.email.$pristine}">...</div> |
เทียบอย่างง่าย
1 2 3 | <div class="form-group" ng-class="{'css class ที่จะใช้': ตรวจสอบ element หรือ input type email ที่ต้องการ}">...</div> |
ดังนั้น
1 2 3 4 5 6 | {'has-error': myForm.email.$invalid && !myForm.email.$pristine}{'เพิ่ม class ชื่อ has-error': (email ไม่ถูกต้อง และ (ตรงช้าม)ยังไม่กรอกข้อมูล}{'เพิ่ม class ชื่อ has-error': (email ไม่ถูกต้อง และ กรอกข้อมูลแล้ว}{'เพิ่ม class ชื่อ has-error': (กรอกข้อมูลแล้ว และ email ไม่ถูกต้อง}ตามเงื่อนไขด้านบน ถ้าเป็นจร้ง หรือ ถ้ากรอกข้อมูลแล้ว และข้อมูลที่กรอกมีรูปแบบemail ไม่ถูกต้อง ก็จะเป็น true ดังนั้น css class has-error จะถูกเพิ่มเข้าไปใน div |
ตัวต่อมา label
1 | <label class="control-label" for="email">Email :</label> |
label นี้จะมี css class ชื่อ control-label ซึ่งจะมีผลตาม has-error ของ div ด้านนอก
คือมี hilight สีแสดงของข้อความ
ต่อมา input type email
1 | <input type="email" class="form-control" name="email" ng-model="email" required /> |
input type email นี้จะมี css class ชื่อ form-control และจะมีผลตาม has-error โดย
ถ้าเกิดข้อผิดพลาด ก็จะแสดง ขอบเป็นสีแดง
ต่อมา span ตัวแรก
1 | <span ng-show="myForm.email.$error.required && !myForm.email.$pristine" class="text-danger">Required</span> |
span ตัวนี้จะใช้สำหรับแจ้งว่า ถ้าเกิดข้อผิดพลาด เช่น input type email ไม่ได้กรอก
ข้อมูล ส่วนนี้ก็จะแสดง โดยใช้ css class ชื่อ text-danger เพื่อกำหนดให้เป็นข้อความสีแดง
จะเห็นว่า span ตัวนี้ กำหนดการแสดง โดยการใช้ ng-show directive
ดูอธิบาย แบบเป็นลำดับ
1 2 3 4 5 6 | ng-show="myForm.email.$error.required && !myForm.email.$pristine"แสดง span นี้ = " error เป็นค่าว่าง และ (ตรงข้าม)ยังไม่กรอกข้อมูลแล้ว"แสดง span นี้ = " error เป็นค่าว่าง และ กรอกข้อมูลแล้ว"แสดง span นี้ = " กรอกข้อมูลแล้ว และ error เป็นค่าว่าง" // คือพิมพ์แล้วลบตามเงื่อนไข ถ้าผู้ใช้ได้เข้าไปใช้งาน เช่น ลองพิมพ์ข้อมูลไปแล้ว แต่เกิดลบข้อมูลออก จนกลายเป็นค่าว่าง ค่าก็จะเป็น true span แจ้งเตือนก็จะแสดง |
ตัวสุดท้าย span ตัวที่สอง
1 | <span ng-show="myForm.email.$error.email" class="text-danger"> Not a Email</span> |
span ตัวนี้แสดง ข้อความเช็คเพิ่มเติม ว่ารูปแบบ email ที่กรอกถูกต้องหรือไม่ โดยใช้ css class ชื่อ text-danger เพื่อกำหนดให้เป็นข้อความสีแดง ถ้ารูปแบบ email ไม่ถูกต้อง
span ตัวนี้ กำหนดการแสดง โดยการใช้ ng-show directive
ดูอธิบาย แบบเป็นลำดับ
1 2 3 4 5 | แสดง span นี้ = " error รูปแบบ email ไม่ถูกต้อง และ (ตรงข้าม)ยังไม่กรอกข้อมูลแล้ว"แสดง span นี้ = " error รูปแบบ email ไม่ถูกต้อง และ กรอกข้อมูลแล้ว"แสดง span นี้ = " กรอกข้อมูลแล้ว และ error รูปแบบ email ไม่ถูกต้อง" ผลตามเงื่อนไข span ตัวที่ 2 นี้จะแสดง เมื่อเงื่อนไขเป็น true นั้นคือ กรอกข้อมูลแล้วแต่ข้อมูลที่กรอกไม่ใช้รูปแบบของ email |
มาดูเพิ่มอีกอัน
1 | <button type="submit" ng-disabled="myForm.$invalid" class="btn btn-primary">Submit</button> |
ปุ่ม submit นี้มีการตรวจสอบ form และกำหนดการใช้งาน คือ ถ้า ฟอร์ม กรอกข้อมูล
ไม่ครบ ตามรายการที่กำหนด required หรือ มีรายการบางรายการ มีรูปแบบไม่ถูกต้อง
ปุ่มนี้ก็จะถูกกำหนดให้ เป็น disabled หรือ ก็คือ กดแล้วไม่มีผลหรือไม่ทำงาน
การตรวจสอบ form นี้ ใช้ ng-disabled directive
ดูอธิบาย แบบเป็นลำดับ
1 2 3 4 5 | ng-disabled="myForm.$invalid" ให้ disabled = "ฟอร์มมีรายการที่ ยังไม่ถูกต้อง เช่น กรอกไม่ครบ หรือรูปแบบไม่ถูกต้อง"เมื่อเปิดเข้ามาครั้งแรก เราจะพบว่า ปุ่มนี้จะ disabled อยู่ เพราะให้ disabled = "ฟอร์มมีรายการที่ ยังไม่ถูกต้อง เช่น กรอกไม่ครบ หรือรูปแบบไม่ถูกต้อง"ให้ disabled = true |
ปุ่ม submit นี้ จะพร้อดเมื่อ disabled = false ซึ่งก็คือ มีการกรอกข้อมูลครบถ้วนและถูกต้อง
ทั้งหมดนี้ ก็คือการประยุกต์ใช้งาน property formcontroller ตรวจสอบ form
โดย ใช้งานร่วมกับ css ในที่นี้ใข้ร่วมกับ css bootstrap (เคยแนะนำไว้ในตอนที่ 3)
เพิ่ม ลบ แก้ไข รายการ ด้วย angularjs ตอนที่ 3
https://www.ninenik.com/content.php?arti_id=517 via @ninenik
โค้ดสำหรับเป็นรูปแบบ ใช้ในการสร้าง form และการตรวจสอบ form ร่วมกับ
การใช้งาน css bootstrap
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 | <!DOCTYPE html><html ng-app="app"><head> <meta charset="utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" /> <script src="app.js"></script> <title>My Learn AngularJs 6</title> <style type="text/css"> </style></head><body ng-controller="appController"> <br> <div class="container"> <form name="myForm" role="form"> <div class="form-group" ng-class="{'has-error': myForm.name.$invalid && !myForm.name.$pristine}"> <label class="control-label" for="name">Name :</label> <input type="text" name="name" ng-model="name" class="form-control" required /> <span ng-show="myForm.name.$error.required && !myForm.name.$pristine" class="text-danger"> Required</span> </div> <div class="radio"> <label class="radio-inline"> <input type="radio" name="gender" ng-model="gender"/>Male </label> <label class="radio-inline"> <input type="radio" name="gender" ng-model="gender" />Female </label> </div> <div class="form-group" ng-class="{'has-error': myForm.site.$invalid && !myForm.site.$pristine}"> <label class="control-label" for="site">Website :</label> <input type="url" class="form-control" name="site" ng-model="site" required /> <span ng-show="myForm.site.$error.required && !myForm.site.$pristine" class="text-danger"> Required</span> <span ng-show="myForm.site.$error.url" class="text-danger"> Not a URL</span> </div> <div class="form-group" ng-class="{'has-error': myForm.email.$invalid && !myForm.email.$pristine}"> <label class="control-label" for="email">Email :</label> <input type="email" class="form-control" name="email" ng-model="email" required /> <span ng-show="myForm.email.$error.required && !myForm.email.$pristine" class="text-danger">Required</span> <span ng-show="myForm.email.$error.email" class="text-danger"> Not a Email</span> </div> <div class="form-group"> <label for="desc">Description :</label> <textarea name="desc" class="form-control" rows="3">{{desc}}</textarea> </div> <div class="checkbox"> <label> <input type="checkbox" name="acept" ng-model="acept" required /> Acept our terms and conditions? </label> </div> <a href="#/" class="btn btn-default">Cancel</a> <button type="submit" ng-disabled="myForm.$invalid" class="btn btn-primary">Submit</button> </form> <br> </div></body></html> |
ไฟล์ app.js
1 2 3 4 | angular.module("app",[]) .controller("appController",["$scope",function($scope){// $scope.name="test";}]); |
ตัวอย่าง
จบสำหรับตอนนี้ รอติดตามตอนต่อไป
