เนื้อหาต่อจากบทความก่อนหน้า
ทบทวน property ของ formcontroller ใน angularjs ตอนที่ 6
https://www.ninenik.com/content.php?arti_id=528 via @ninenik
$error property ของ formcontroller ซึ่งเป็น 1 ใน 5 property
ที่มี $prisine $dirty $valid $invalid และ $error
โดย $error จะมี error name ทั้งหมด 9 อัน
max ต้องอยู่ในรูปแบบตัวเลขที่กรอก น้อยกว่าหรือเท่ากับ max ที่กำหนด
required รูปแบบที่จำเป็นต้องกรอกข้อมูล
maxlength ต้องอยู่ในรูปแบบจำนวนข้อความที่กรอกไม่เกิน
min ต้องอยู่ในรูปแบบตัวเลขที่กรอก มากกว่าหรือเท่ากับ min ที่กำหนด
minlength ต้องอยู่ในรูปแบบจำนวนข้อความที่กรอกอย่างน้อย
number ต้องอยู่ในรูปแบบของการกรอกตัวเลข
pattern ต้องอยู่ในรูปแบบ regular expression หรือรูปแบบ ที่เราเขียนขึ้น
email ต้องอยู่ในรูปแบบ email
url ต้องอยู่ในรูปแบบ url
โดยการกำหนด ใน html ในกรณี maxlength เราจะใช้ ng directive นำหน้า
เป็น ng-maxlength แทน
เนื่องจากคำว่า maxlength จะไปซ้ำกับ attribute เดิมของ html ที่ใช้จำกัด
จำนวนข้อความที่แสดง input
มาดูโค้ดตัวอย่างส่วนของการเช็ค min max required minlength number
<!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" ng-minlength="2" required />
</div>
<div class="form-group">
<label class="control-label">Number :</label>
<input type="number" name="number" class="form-control" ng-model="number" min="4" max="12" required />
</div>
<div class="form-group">
<label class="control-label">Description :</label>
<textarea name="desc" class="form-control" ng-model="desc" row="3" ng-maxlength="15"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<br>
<pre>
<span>myForm.name.$error.required : {{myForm.name.$error.required}}</span>
<span>myForm.name.$error.minlength : {{myForm.name.$error.minlength}}</span>
<span>myForm.number.$error.number : {{myForm.number.$error.number}}</span>
<span>myForm.number.$error.min : {{myForm.number.$error.min}}</span>
<span>myForm.number.$error.max : {{myForm.number.$error.max}}</span>
<span>myForm.desc.$error.maxlength : {{myForm.desc.$error.maxlength}}</span>
</pre>
</div>
</body>
</html>
โค้ดไฟล์ app.js
angular.module("app",[])
.controller("appController",["$scope",function($scope){
}]);
ตัวอย่างผลลัพธ์
ให้เราสังเกตด้วยชื่อ คำว่า error คือ ข้อผิดพลาด ดังนั้น error = false คือ
ไม่มีข้อผิดพลาด ให้เข้าใจตามนี้
สรุปก็คือถ้าเราเอาค่า error ไป เช็คกับ form ค่า error จะต้องเป็น false ทั้งหมด
นั้นหมายถึง ไม่มีข้อผิดพลาดเกิดขึ้น
แต่สังเกตว่า เวลาเราเปิดขึ้นมาครั้งแรก error เป็น false หมด (ยกเว้นใช้กับ required ที่เนื่องจากยังไม่ได้กรอกข้อมูล) ดังนั้น การเช็ค errror ต้องเช็คควบคุู่ไปกับ $valid คือ ต้องมีข้อมูลหรือมีการกรอกข้อมูล ก่อน เป้นต้น
อธิบายเพิ่ม กรณียังไม่กรอกข้อมูล เมื่อโหลดมาครั้งแรก
myForm.name.$error.required : true // ผิดพลาดเป็น จริง ชื่อต้องกรอก myForm.name.$error.minlength : false // ผิดพลาด ยังไม่มีข้อมูล myForm.number.$error.number : false // ผิดพลาด ยังไม่มีข้อมูล myForm.number.$error.min : false // ผิดพลาด ยังไม่มีข้อมูล myForm.number.$error.max : false // ผิดพลาด ยังไม่มีข้อมูล myForm.desc.$error.maxlength : false // ผิดพลาด ยังไม่มีข้อมูล
อธิบายเพิ่ม กรณียังกรอกข้อมูลแล้ว และข้อมูลเป็นไปตามเงื่อนไข
myForm.name.$error.required : false // มีการกรอกข้อมูล ไม่มีค่าว่าง ไม่มีข้อผิดพลาด myForm.name.$error.minlength : false // ถ้ากรอกตัวอักษรอย่างน้อย 2 ตัวขึ้นไป (ตามที่กำหนด minlength="2") ไม่มีข้อผิดพลาด myForm.number.$error.number : false // ถ้ากรอกที่เป็นตัวเลข ไม่มีข้อผิดพลาด myForm.number.$error.min : false // ถ้ากรอกเป็นตัวเลขมากกว่าหรือเท่ากับ 4 (min="4") ไม่ผิดพลาด myForm.number.$error.max : false // ถ้ากรอกเป็นตัวเลขน้อยกว่าหรือเท่ากับ 12 (max="12") ไม่ผิดพลาด myForm.desc.$error.maxlength : false // ถ้ากรอกข้อมูลไม่เกิน 15 ตัวอักษร (maxlength="15") ไม่ผิดพลาด // ปกติตัวนี้ไม่ค่อยใช้งาานเท่าไหร่
มาดูอีก 3 อันที่เหลือ pattern email url
ตัวอย่างโค้ด
<!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">Website :</label>
<input type="url" name="site" class="form-control" ng-model="site" required />
</div>
<div class="form-group">
<label class="control-label">Email :</label>
<input type="email" name="email" class="form-control" ng-model="email" required />
</div>
<div class="form-group">
<label class="control-label">Pattern :</label>
<input type="text" name="pattern" class="form-control" ng-model="pattern" pattern="([:digit:])" required />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<br>
<pre>
<span>myForm.site.$error.url : {{myForm.site.$error.url}}</span>
<span>myForm.email.$error.email : {{myForm.email.$error.email}}</span>
<span>myForm.pattern.$error.pattern : {{myForm.pattern.$error.pattern}}</span>
</pre>
</div>
</body>
</html>
ไฟล์ app.js เหมือนด้านบน
ตัวอย่างผลลัพธ์
อันนี้ก็เหมือนเดิม คำว่า error คือ ข้อผิดพลาด ดังนั้น error = false คือ
ไม่มีข้อผิดพลาด ให้เข้าใจตามนี้ (ยกเว็น pattern ต้องเป็น true)
อธิบายเพิ่ม กรณียังกรอกข้อมูลแล้ว และข้อมูลเป็นไปตามเงื่อนไข
myForm.site.$error.url : false // ถ้า มีการกรอก url ถูกต้องตามรูปแบบ http://xxxx แสดงว่าไม่ผิดพลาด myForm.email.$error.email : false // ถ้า มีการกรอก email ถูกต้องตามรูปแบบ xxx@xxx.xxx แสดงว่าไม่ผิดพลาด myForm.pattern.$error.pattern : true // ถ้ากรอกข้อมูลในรูปแบบ regular expression หรือรูปแบบ ที่เราเขียนขึ้น แสดงว่าไม่ผิดพลาด // ในตัวอย่าง ([:digit:]) คือ pattern ที่ต้องเป็นเฉพาะตัวเลข 0-9 เท่านั้น ถ้าเราเพิ่ม // ที่เป็นตัวเลข ค่า $error.pattern จะเป็น true แสดงว่าไม่มีข้อผิดพลาด // ดังนั้น $error.pattern ที่เป็น false จึงหมายถึง กรอกข้อมูลไม่ตรงตามรูปแบบที่กำหนด
ในตอนหน้า เราจะใช้ค่าต่างๆ จากทั้งสองตอนที่ผ่านมา นี้มาประยุกต์
ใช้ในการกำหนด css แจ้งเตือนการกรอกข้อมูล ตามเงื่อนไขของ error รอติดตาม
