เราได้เคยศึกษา เกี่ยวกับ การใช้งาน form มาแล้วในเนื้อหาก่อนหน้า
เพิ่ม ลบ แก้ไข รายการ ด้วย angularjs ตอนที่ 3
https://www.ninenik.com/content.php?arti_id=517 via @ninenik
ในตอนนี้ เราจะมาเจาะลืก ถึงการใช้งาน form.FormController ใน angularjs
*ย้ำ หมายเหตุ บทความ angularjs เราจะใช้คู่ไปกับการใช้งาน css ของ bootstrap
ดึงนั้น css class ที่กล่าวถึง จะเป็น css ของ bootstrap ทั้งหมด
form.FormController คือ element ต่างๆ ที่อยู่ในแท็ก form
ไม่ว่าจะเป็น input type text ,radio,checkbox ,textarea เหล่านี้เป็นต้น
มารู้จัก property ของ FormController
ขอยกตัวอย่างรูปแบบ form ง่ายๆ ประกอบคำอธิบาย
<form name="myForm" role="form">
<div class="form-group">
<label class="control-label">Name : </label>
<input type="text" name="name" class="form-control" ng-model="name" required />
</div>
</form>
1. $pristine คือ ถ้าไม่มีการทำอะไรกับ element นั้น จะเป็น true
เช่น myForm.name.$pristine อธิบายคือ
เมื่อเราเปิดเพจ หน้าที่มีฟอร์มนี้ขึ้น มาครั้งแรก
input type ชื่อ name ค่า myForm.name.$pristine จะมีค่าเป็น true
แต่เมื่อเราพิมพ์อะไรลงไป ค่าตัวนี้จะเป็น false
2. $dirty คือ ตรงข้ามกับ $pristine ถ้ามีการกระทำอะไรกับ element นั้นแล้ว
จะเป็น true
เช่น myForm.name.$dirty อธิบายคือ
เมื่อเราเปิดเพจ หน้าที่มีฟอร์มนี้ขึ้น มาครั้งแรก
input type ชื่อ name ค่า myForm.name.$dirty จะมีค่าเป็น false
แต่เมื่อเราพิมพ์อะไรลงไป ค่าตัวนี้จะเป็น true
3. $valid คือ ถ้ามีการกระทำใดๆ กับ element นั้น แล้ว รูปแบบ และข้อมูลมีความ
ถูกต้อง เช่น ถ้าเป็น input type email เมื่อมีการกรอกข้อมูล และข้อมูลอยู่ในรูปแบบ
email แล้วเท่านั้น ค่า valid จึงจะเป็น true
ปกติค่านี้ปกติเร่ิมต้นจะเป็น false
กรณี myForm.name.$valid อธิบายคือ
เมื่อเราเปิดเพจ หน้าที่มีฟอร์มนี้ขึ้น มาครั้งแรก
input type ชื่อ name ค่า myForm.name.$valid จะมีค่าเป็น false
แต่เมื่อเราพิมพ์อะไรลงไป ค่าตัวนี้จะเป็น true ทันที โดยไม่ได้อิงรุปแบบต้องถูก
แบบ email
4. $invalid คือ ตรงข้าม กับ $valid
กรณี myForm.name.$invalid อธิบายคือ
เมื่อเราเปิดเพจ หน้าที่มีฟอร์มนี้ขึ้น มาครั้งแรก
input type ชื่อ name ค่า myForm.name.$invalid จะมีค่าเป็น true
แต่เมื่อเราพิมพ์อะไรลงไป ค่าตัวนี้จะเป็น false โดยรูปแบบต้องตรงกับ
type ด้วย เช่น กรณี input type email ต้องมีข้อมูล และรูปแบบที่ถูกต้อง
5. $error ตัวสุดท้าย จะคืนค่าต่างจาก 4 ตัวด้านบน
ค่าที่ได้จาก $error จะเป็น object
โดย key คือ error names
เช่น myForm.name.$error
{"required":true,"email":false}
โค้ดทดสอบ
<!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">
<label class="control-label">Name :</label>
<input type="text" name="name" class="form-control" ng-model="name" required />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<br>
<pre>
<span>myForm.name.$pristine : {{myForm.name.$pristine}}</span>
<span>myForm.name.$dirty : {{myForm.name.$dirty}}</span>
<span>myForm.name.$valid : {{myForm.name.$valid}}</span>
<span>myForm.name.$invalid : {{myForm.name.$invalid}}</span>
<span>myForm.name.$error : {{myForm.name.$error}}</span>
</pre>
</div>
</body>
</html>
ไฟล์ app.js
angular.module("app",[])
.controller("appController",["$scope",function($scope){
// $scope.name="test";
}]);
ตัวอย่างผลลัพธ์
สำหรับ property ของ formcontroller ก็จะมี 5 รายการ ตามด้านบน
แต่ในข้อ 5 จะมีรายละเอียดการใช้งาน เพิ่ม
จะขอต่อเนื้อหาเกี่ยวกับ formcontroller ต่อในบทความหน้า รอติดตาม
