บทความนี้อธิบายการตรวจสอบฟอร์มก่อนบันทึกข้อมูลลงใน Array เพื่อให้ข้อมูลที่จัดเก็บมีความถูกต้อง
Error Property ที่ควรรู้จัก
- $dirty ใช้เมื่อมีการกระทำการ โดยพิมพ์บางอย่างลงไปในฟอร์มแล้ว
- $pristine ใช้เมื่อยังไม่กระทำการใดๆ กับฟอร์ม
- $valid ใช้ตรวจสอบข้อมูลที่กรอกลงไปในฟอร์ม ถ้าถูกต้องมีค่าเป็น true
- $invalid ใช้ตรวจสอบข้อมูลที่กรอกลงไปในฟอร์ม ถ้าไม่ถูกต้องมีค่าเป็น true
- $error ใช้อ้างอิงการตรวจสอบความถูกต้องประเภทของ input เช่น url, email
ไฟล์ app.js
(function(){
app = angular.module('myapp',[]);
app.controller('FormValidation',function(){
this.myArr=[];
this.val={};
this.countrys=['England','U.S.A','Thailand','France','Canada'];
this.addUser = function(){
this.myArr.push(this.val);
this.val={};
};
});
})();
อธิบาย : ดูคำอธิบายจาก AngularJs with ng-submit
ไฟล์ bookstore.html
<html ng-app="myapp">
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<style>
span{
color:red;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-12" ng-controller="FormValidation as validCtrl">
<form name="signUp" ng-submit="signUp.$valid && validCtrl.addUser()" novalidate>
Country :
<select name="country" ng-model="validCtrl.val.country" required>
<option ng-repeat="country in validCtrl.countrys" value="{{country}}"> {{country}}
</option>
</select>
<span ng-show="signUp.country.$error.required">
Country is required.
</span><br><br>
Firstname :
<input type ="text" name="firstname" ng-model="validCtrl.val.firstname" required />
<span ng-show="signUp.firstname.$dirty && signUp.firstname.$error.required">Firstname is required.</span><br><br>
Lastname :
<input type ="text" name="lastname" ng-model="validCtrl.val.lastname" required />
<span ng-show="signUp.lastname.$pristine && signUp.lastname.$error.required">Lastname is required.</span><br><br>
E-mail :
<input type="email" name="mail" ng-model="validCtrl.val.mail" required />
<span ng-show="signUp.mail.$invalid">
<span ng-show="signUp.mail.$error.required">Email is required.</span>
<span ng-show="signUp.mail.$error.email">Email is Invalid.</span>
</span><br><br>
URL Website :
<input type ="url" name="myurl" ng-model="validCtrl.val.url" required />
<span ng-show="signUp.myurl.$invalid">
<span ng-show="signUp.myurl.$error.required">url is required.</span>
<span ng-show="signUp.myurl.$error.url">url is Invalid.</span>
</span><br><br>
<div> This form is {{signUp.$valid}} </div><br>
<input type="submit" value="Submit" />
</form>
<p ng-repeat="result in validCtrl.myArr">
<b>Your Profile</b><br>
Country : {{result.country}}<br>
Your name : {{result.firstname}} {{result.lastname}}<br>
Email : {{result.mail}}<br>
URL Website : {{result.url}}
</p>
</div>
</div>
</body>
</html>
ไม่ควรกำหนด CSS style ให้กับ tag spand โดยตรง ควรสร้าง CSS class จะเหมาะสมกว่า
อธิบาย :
- Directive ที่ไม่ได้อธิบายในที่นี้ให้ดูจากบทความ AngularJs with ng-submit หรือบทความเบื้องต้นอื่นๆ
- ng-submit จะทำงานเมื่อ ฟอร์มถูกต้อง และ สามารถเรียกใช้ฟังก์ชั่น addUser() ใน controller ได้
- novalidate เป็นการปิดการ validate ข้อมูลที่เป็น default ของ HTML 5
- required เป็นการกำหนดให้ระบุข้อมูลลงใน tag นั้นๆ
- <span ng-show="signUp.country.$error.required"> ของ Dropdown List ชื่อประเทศ จะแสดง Error เมื่อไม่มีการเลือกข้อมูลจาก dropdown
- <span ng-show="signUp.firstname.$dirty && signUp.firstname.$error.required"> ของ Firstname จะไม่แสดง Error ทันที แต่จะแสดงเมื่อมีการพิมพ์ข้อมูลลงไปใน textbox แล้ว และมีการลบข้อความที่พิมพ์ทั้งหมดทิ้ง เพราะ $dirty จะเป็น true หลังมีการกระทำบางอย่างกับฟอร์ม และเมื่อลบข้อความทั้งหมดทิ้ง ทำให้ $error.required เป็น true เช่นกัน
- <span ng-show="signUp.lastname.$pristine && signUp.lastname.$error.required"> ของ Lastname จะแสดง Error ทันที ก่อนจะพิมพ์ข้อมูลลงไปใน textbox เพราะ $pristine จะทำงานก่อนที่จะทำการบางอย่างกับ tag
- <span ng-show="signUp.mail.$invalid"> ของ Email จะแสดง <span ...> เมื่อข้อมูลที่กรอกไม่ถูกต้อง นั่นคือผิด format ของ email เช่น ไม่ใส่เครื่องหมาย "@"
- <span ng-show="signUp.mail.$error.required"> ถูกเรียกใช้งานเมื่อ signUp.mail.$invalid เป็น true และไม่มีการกรอกข้อมูลลงไปใน textbox
- <span ng-show="signUp.mail.$error.email"> ถูกเรียกใช้งานเมื่อ signUp.mail.$invalid เป็น true และข้อมูลที่กรอกผิด format โดยมีการระบุ ว่าเป็น format email ไว้ที่ "..... $error.email"
- ส่วนของ URL Website ก็ทำการ validate เช่นเดียวกับ Email แต่ต่างกันที่ format เป็น "..... $error.url" แทน
- signUp.$valid จะแสดงค่าเป็น true เมื่อฟอร์มกรอกข้อมูลถูกต้องทั้งหมด และจะแสดงค่าเป็น false เมื่อกรอกข้อมูลไม่ถูกต้อง
ผลลัพธ์
ก่อนกรอกข้อมูล
หลังกรอกข้อมูลถูกต้อง
ไม่มีความคิดเห็น:
แสดงความคิดเห็น