สิ่งที่ควรรู้

State of Form Control (input, select, checkbox, etc)

จากบทที่แล้วได้พูดถึง form control ต่างๆที่ใช้ในแบบฟอร์ม

โดย AngularJS ได้ทำการกำหนด Stageของ form control 4 อย่าง ได้แก่

Pristine
สถานะที่ระบุว่า Form Control นั้นยังไม่ถูกใช้งาน จะมี class ng-pristine ระบุอยู่ใน form control

Dirty
สถานะที่ระบุว่า Form Control นั้นได้ถูกใช้งานแล้ว จะมี class ng-dirty ระบุอยู่ใน form control

Valid
สถานะที่ระบุว่า Form Control นั้นข้อมูลที่กรอกถูกต้อง จะมี class ng-valid ระบุอยู่ใน form control

Invalid
สถานะที่ระบุว่า Form Control นั้นข้อมูลที่กรอกไม่ถูกต้อง จะมี class ng-invalid ระบุอยู่ใน form control

Set-up Form

*** ก่อนที่เราจะทำการ validate ค่าใน AngularJS ได้นั้นจะต้องทำการปิดตัว default validate ของ html เสียก่อน ***

โดยเพิ่ม novalidate ไปที่ <form>

<form name="demoForm" ng-submit="controller.submit()" novalidate>

ซึ่ง form จะมีค่า Validity อยู่ ได้แก่
$valid - ถ้าเป็น True แสดงว่าฟอร์มกรอกถูกต้อง
$invalid - ถ้าเป็น True แสดงว่าฟอร์มกรอกมีบางอย่างไม่ถูกต้อง
$error - มีลักษณะเป็น Object ที่เก็บ error ทั้งหมดใน form โดยแยกด้วยชื่อตัวแปรของ form control
โดยเช็คได้จาก 
ชื่อฟอร์ม.$validity

โดยเราสามารถใช้ $validity พวกนี้เป็นเงื่อนไขในการอนุญาติให้ submit ฟอร์มได้

<form name="demoForm" ng-submit="demoForm.$valid && controller.submit()" novalidate>

Required/Mandatory Input

ในกรณีที่ต้องการ/บังคับให้ผู้ใช้กรอกฟิลด์นั้น ให้ใส่ required ไว้ใน form control

โดยช่องใดที่ไม่ถูกกรอกจะมี class ng-invalid-required ระบุอยู่ใน form control

<input ng-model="..." type="text" required/>
<input ng-model="..." type="checkbox" required/>
<input ng-model="..." type="radio" required/>
<select ng-model="..." required>
	<option>1</option>
	<option>2</option>
</select>

หมายเหตุ: โดยข้อมูลจะต้องมี ng-model อยู่ใน form-control ด้วย

สามารถ validate input ของ html5 ได้ เช่น email, url, number[min,max]

ดูตัวอย่างได้ที่นี่ Demo

Ng-Required

เป็น Directive ที่กำหนดให้ tag ทีมีมัน จะทำการ Required ก็ต่อเมื่อเงื่อนไขเป็นจริง 

<input ng-model="..." type="text" ng-required="เงื่อนไข/ฟังก์ชั่น">

Ng-Disabled

เป็น Directive ที่กำหนดให้ tag ทีมีมันจะทำการ Disabled ก็ต่อเมื่อเงื่อนไขเป็นจริง 

<input ng-model="..." type="text" ng-disabled="เงื่อนไข/ฟังก์ชั่น">

Ng-MinLength

เป็น Directive ที่กำหนดให้ tag ทีมีมันจะต้องทำการกรอกข้อมูลอย่างน้อยตามที่กำหนดไว้

<input ng-model="..." type="text" ng-minlength="จำนวนตัวอักษร">

Ng-MaxLength

เป็น Directive ที่กำหนดให้ tag ทีมีมันจะต้องทำการกรอกข้อมูลมากสุดได้เท่าที่กำหนดไว้

<input ng-model="..." type="text" ng-maxlength="จำนวนตัวอักษร">

Ng-Pattern

เป็น Directive ที่กำหนดให้ tag ทีมีมันจะต้องทำการกรอกข้อมูลตามรูปแบบที่ตั้งไว้

ศึกษาการใช้งาน RegExp ได้ที่ w3schools RegExp

<input ng-model="..." type="text" ng-pattern="/regexp/">

สามารถดูตัวอย่างการใช้งานได้ที่ Input Validation

Challenge 9: Add Validate to Review Form

เราต้องทำการตรวจสอบข้อมูลในคุณทานากะเพื่อให้ได้รับ feedback จากลูกค้าจริงๆ ที่ไม่ใช่ spam

โดยส่วนที่จะให้ Validate คือ ชื่อคนรีวิว และจำนวนดาว

สามารถดูผลลัพธ์ได้ที่ Demo

ไฟล์ storereview.html

<!DOCTYPE html>
<html ng-app="application">
<head>
	<meta charset="utf-8">
    <!-- bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- bootstrap theme -->
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
	

      
Review {{"Tanaka" | uppercase}}{{"-San"}}'s Sushi Store

      
Open Since {{10*200}}.

    

    

		

			Reviews
			

				Text Input : {{data.text}} - Review {{data.select}} Star(s)
				
{{data.textarea}}

				{{data.email}}
			

			

				{{data.text}} - {{data.select}} Star(s)
				
{{data.textarea}}

				{{data.email}}
			

		

		

			

			
			Review Form
			
			

			    
			  

				
			  

			

			
			

			    
			  

				
			  

			

			
			

			  
			  

				
			  

			

			
			

			  
			  
                     
				
			  

			

			
			

				
				

					
				

			

			

		

	
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/lib/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="js/lib/bootstrap.min.js"></script>
    <!-- AngularJS JavaScript -->
    <script src="js/lib/angular.min.js"></script>
    <script src="js/review.js"></script>
</body>
</html>

ไฟล์ review.js

(function () {
	'use strict';
	
	var app = angular.module('application', []);
	app.controller('reviewController', function ($scope) {
		$scope.datas =[];
		$scope.data ={};
		$scope.addData = function (datas) {
			datas.push($scope.data);
			$scope.data = {};
		};
	});
	
})();