เนื้อหาในตอนนี้ จะเป็นการประยุกต์ใช้งาน สิ่งที่เราได้รู้
เกี่ยวกับ 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 ประกอบ
<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 อัน
ดูไปทีละตัว
<div class="form-group"> ... </div>
ตัวนี้จะคลุมด้านนอก ถ้ามีการเช็คก input type email แล้วเกิดข้อผิดพลาด
ก็จะถูก กำหนดให้ มี css class ชื่อ has-error เพื่มเข้ามา โดยเมื่อ css นี้เพิ่มเข้ามา
จะทำให้ส่วนต่างๆด้านใน แสดงในลักษณะแบบ error เช่น ข้อความเป็นสีแดง
input type มี hilight ขอบเป็นสีแดง แบบนี้เป็นต้น
<div class="form-group has-error"> </div>
โค้ดด้านบนที่มีการเพิ่ม css เข้ามา ได้มาจากการใช้งาน ng-class directive
<div class="form-group" ng-class="{'has-error': myForm.email.$invalid && !myForm.email.$pristine}">
...
</div>
เทียบอย่างง่าย
<div class="form-group" ng-class="{'css class ที่จะใช้': ตรวจสอบ element หรือ input type email ที่ต้องการ}">
...
</div>
ดังนั้น
{'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
<label class="control-label" for="email">Email :</label>
label นี้จะมี css class ชื่อ control-label ซึ่งจะมีผลตาม has-error ของ div ด้านนอก
คือมี hilight สีแสดงของข้อความ
ต่อมา input type email
<input type="email" class="form-control" name="email" ng-model="email" required />
input type email นี้จะมี css class ชื่อ form-control และจะมีผลตาม has-error โดย
ถ้าเกิดข้อผิดพลาด ก็จะแสดง ขอบเป็นสีแดง
ต่อมา span ตัวแรก
<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
ดูอธิบาย แบบเป็นลำดับ
ng-show="myForm.email.$error.required && !myForm.email.$pristine" แสดง span นี้ = " error เป็นค่าว่าง และ (ตรงข้าม)ยังไม่กรอกข้อมูลแล้ว" แสดง span นี้ = " error เป็นค่าว่าง และ กรอกข้อมูลแล้ว" แสดง span นี้ = " กรอกข้อมูลแล้ว และ error เป็นค่าว่าง" // คือพิมพ์แล้วลบ ตามเงื่อนไข ถ้าผู้ใช้ได้เข้าไปใช้งาน เช่น ลองพิมพ์ข้อมูลไปแล้ว แต่เกิดลบ ข้อมูลออก จนกลายเป็นค่าว่าง ค่าก็จะเป็น true span แจ้งเตือนก็จะแสดง
ตัวสุดท้าย span ตัวที่สอง
<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
ดูอธิบาย แบบเป็นลำดับ
แสดง span นี้ = " error รูปแบบ email ไม่ถูกต้อง และ (ตรงข้าม)ยังไม่กรอกข้อมูลแล้ว" แสดง span นี้ = " error รูปแบบ email ไม่ถูกต้อง และ กรอกข้อมูลแล้ว" แสดง span นี้ = " กรอกข้อมูลแล้ว และ error รูปแบบ email ไม่ถูกต้อง" ผลตามเงื่อนไข span ตัวที่ 2 นี้จะแสดง เมื่อเงื่อนไขเป็น true นั้นคือ กรอกข้อมูลแล้ว แต่ข้อมูลที่กรอกไม่ใช้รูปแบบของ email
มาดูเพิ่มอีกอัน
<button type="submit" ng-disabled="myForm.$invalid" class="btn btn-primary">Submit</button>
ปุ่ม submit นี้มีการตรวจสอบ form และกำหนดการใช้งาน คือ ถ้า ฟอร์ม กรอกข้อมูล
ไม่ครบ ตามรายการที่กำหนด required หรือ มีรายการบางรายการ มีรูปแบบไม่ถูกต้อง
ปุ่มนี้ก็จะถูกกำหนดให้ เป็น disabled หรือ ก็คือ กดแล้วไม่มีผลหรือไม่ทำงาน
การตรวจสอบ form นี้ ใช้ ng-disabled directive
ดูอธิบาย แบบเป็นลำดับ
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
<!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
angular.module("app",[])
.controller("appController",["$scope",function($scope){
// $scope.name="test";
}]);
ตัวอย่าง
จบสำหรับตอนนี้ รอติดตามตอนต่อไป
