- การสร้างฟอร์มด้วย AngularJS
- ตรวจสอบฟอร์ม (Validating Forms) ด้วย AngularJS
- การตรวจสอบที่กำหนดเอง (Custom Validation)
- การจัดการการส่งแบบฟอร์ม (Handling Form Submission)
- คลาสการตรวจสอบแบบฟอร์ม (Form Validation Classes)
เมื่อพูดถึงการทำเว็บ Angular และทำแอพแบบไดนามิกและโต้ตอบได้ การจัดการอินพุตของผู้ใช้เป็นส่วนสำคัญ วิธีหนึ่งที่พบได้บ่อยที่สุดในการรับข้อมูลผู้ใช้คือผ่านแบบฟอร์ม พวกเขาช่วยให้เราสามารถรวบรวมข้อมูลจากผู้ใช้และส่งไปยังเซิร์ฟเวอร์สำหรับการประมวลผล AngularJS ทำให้กระบวนการสร้างและตรวจสอบความถูกต้องของฟอร์มง่ายขึ้น ซึ่งจะทำให้งานทำเว็บ Angular และทำแอพคล่องตัวขึ้น
AngularJS มีฟีเจอร์มากมายที่ทำให้การสร้างฟอร์มและตรวจสอบความถูกต้องเป็นเรื่องง่าย ให้ประสบการณ์ผู้ใช้ที่เหนือกว่า มีการผูกข้อมูลแบบสองทาง การตรวจสอบแบบฟอร์ม การจัดการการส่งแบบฟอร์ม และโฮสต์ของคุณสมบัติอื่น ๆ ที่ทำให้การจัดการแบบฟอร์มเป็นเรื่องง่าย
1. การสร้างฟอร์มด้วย AngularJS
การสร้างแบบฟอร์มใน AngularJS นั้นคล้ายกับการสร้างแบบฟอร์มใน HTML ทั่วไปอย่างมาก อย่างไรก็ตาม AngularJS เพิ่มฟอร์มของคุณด้วยคุณสมบัติเพิ่มเติมและความสามารถในการตรวจสอบความถูกต้อง
ในการสร้างฟอร์มใน AngularJS คุณจะต้องใช้ <form> แท็ก เช่นเดียวกับที่คุณทำใน HTML ทั่วไป อย่างไรก็ตาม ใน AngularJS เราใช้ ng-submit คำสั่งเพื่อระบุว่าจะเกิดอะไรขึ้นเมื่อส่งแบบฟอร์ม
ตัวอย่างเช่น:
<div ng-app="myApp" ng-controller="myController">
<form ng-submit="submitForm()">
<label for="email">Email:</label>
<input type="email" id="email" ng-model="email">
<input type="submit" value="Submit">
</form>
</div>ที่นี่ คำ สั่ง ng-submit ชี้ไปที่ฟังก์ชัน submitForm() ซึ่งกำหนดไว้ในคอนโทรลเลอร์ myController ฟังก์ชันนี้จะถูกเรียกใช้เมื่อมีการส่งแบบฟอร์ม
คำ ng-model สั่งในinputแท็กผูกค่าของฟิลด์อินพุตกับคุณสมบัติ email ใน $scope วัตถุ นี่คือตัวอย่างของการเชื่อมโยงข้อมูลแบบสองทาง – AngularJS อัปเดตคุณสมบัติ email บนวัตถุ $scope อย่างต่อเนื่องในขณะที่คุณพิมพ์ลงในช่องป้อนข้อมูล และในทางกลับกัน
2. ตรวจสอบฟอร์ม (Validating Forms) ด้วย AngularJS
เมื่อคุณสร้างแบบฟอร์มแล้ว ขั้นตอนสำคัญถัดไปในการทำเว็บ Angular และทำแอพคือการตรวจสอบความถูกต้อง การตรวจสอบความถูกต้องของแบบฟอร์มเป็นสิ่งสำคัญเพื่อให้แน่ใจว่าข้อมูลที่แอปพลิเคชันของคุณได้รับนั้นถูกต้องและเป็นประโยชน์ AngularJS มีชุดคำสั่งในตัวสำหรับจัดการการตรวจสอบความถูกต้องของแบบฟอร์ม
การตรวจสอบความถูกต้องของแบบฟอร์ม AngularJS ทำงานโดยการเพิ่มคุณสมบัติและคลาส CSS ลงในแบบฟอร์มและอินพุตของแบบฟอร์ม เพื่อระบุความถูกต้อง
มีคำสั่ง AngularJS หลายคำสั่งที่ช่วยในการตรวจสอบความถูกต้องของแบบฟอร์ม เช่น:
ng-required: คำสั่งนี้ระบุว่าต้องกรอกข้อมูลในช่องป้อนข้อมูลng-minlengthและng-maxlength: คำสั่งเหล่านี้กำหนดความยาวต่ำสุดและสูงสุดของฟิลด์อินพุตng-pattern: คำสั่งนี้ระบุรูปแบบ regex ที่อินพุตต้องตรงกันng-validและng-invalid: คุณสมบัติเหล่านี้เป็นคุณสมบัติที่ AngularJS เพิ่มให้กับอินพุตของฟอร์ม ซึ่งระบุว่าอินพุตนั้นถูกต้องหรือไม่ถูกต้อง
นี่คือตัวอย่างฟอร์มที่ใช้คำสั่งเหล่านี้:
<div ng-app="myApp" ng-controller="myController">
<form name="myForm" novalidate ng-submit="submitForm()">
<label for="email">Email:</label>
<input type="email" id="email" name="email" ng-model="email" ng-required="true" ng-pattern="/\S+@\S+\.\S+/">
<span ng-show="myForm.email.$invalid">Invalid email address</span>
<input type="submit" value="Submit" ng-disabled="myForm.$invalid">
</form>
</div>ในตัวอย่างนี้ ng-required คำสั่งระบุว่าช่องอีเมลต้องกรอก คำ ng-pattern สั่งระบุรูปแบบ regex ที่อีเมลต้องตรงกัน ในกรณีนี้ จะเป็นรูปแบบพื้นฐานสำหรับการตรวจสอบอีเมล
คำสั่ง นี้ ng-show ใช้เพื่อแสดงข้อความแสดงข้อผิดพลาดเมื่อฟิลด์อีเมลไม่ถูกต้อง myForm.email.$invalid เป็นคุณสมบัติที่ AngularJS เพิ่มลงในช่องป้อนอีเมล และจะเป็นจริงเมื่ออีเมลไม่ถูกต้อง (อาจเป็นเพราะไม่ตรงกับรูปแบบ regex หรือเพราะว่างเปล่าเมื่อจำเป็น)
สุดท้าย ng-disabled คำสั่งนี้ใช้เพื่อปิดใช้งานปุ่มส่งเมื่อแบบฟอร์มไม่ถูกต้อง myForm.$invalid เป็นคุณสมบัติที่ AngularJS เพิ่มลงในฟอร์ม และจะเป็นจริงเมื่ออินพุตฟอร์มใดไม่ถูกต้อง
3. การตรวจสอบที่กำหนดเอง (Custom Validation)
แม้ว่าคำสั่งการตรวจสอบในตัวของ AngularJS จะครอบคลุมสถานการณ์ที่หลากหลาย แต่อาจมีบางกรณีที่คุณต้องการใช้ตรรกะการตรวจสอบแบบกำหนดเอง คุณสามารถทำได้โดยใช้ API ตัวควบคุมฟอร์มของ AngularJS
ตัวควบคุมฟอร์มมีเมธอดและคุณสมบัติหลายอย่างที่คุณสามารถใช้เพื่อสร้างกฎการตรวจสอบแบบกำหนดเอง หนึ่งในคุณสมบัติเหล่านี้คือ $validators ชุดของฟังก์ชันที่ AngularJS จะเรียกใช้เพื่อตรวจสอบการป้อนข้อมูลในแบบฟอร์ม
ต่อไปนี้คือตัวอย่างเครื่องมือตรวจสอบความถูกต้องแบบกำหนดเองที่จะตรวจสอบว่าอีเมลที่ป้อนนั้นถูกใช้ไปแล้วหรือไม่:
angular.module('myApp', [])
.directive('emailAvailable', function($q, $http) {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
ngModel.$asyncValidators.emailAvailable = function(email) {
return $http.get('/api/check-email?email=' + email).then(
function(response) {
if (!response.data.available) {
return $q.reject('Email is already taken.');
}
return true;
}
);
};
}
};
});ในตัวอย่างนี้ เรากำลังสร้างคำสั่งใหม่ emailAvailable ที่ต้องใช้ ngModel ตัวควบคุม ในฟังก์ชันลิงก์ของคำสั่ง เราเพิ่มตัวตรวจสอบใหม่ให้ ngModel.$asyncValidators กับ ตัวตรวจสอบนี้ส่งคำขอ GET ไปที่ /api/check-email โดยส่งอีเมลที่ป้อนเป็นพารามิเตอร์ หากการตอบกลับระบุว่าอีเมลนั้นถูกใช้ไปแล้ว โปรแกรมตรวจสอบความถูกต้องจะปฏิเสธคำสัญญา และ AngularJS จะทำเครื่องหมายอีเมลที่ป้อนว่าไม่ถูกต้อง
การตรวจสอบแบบกำหนดเองนี้ช่วยให้เราสามารถเพิ่มเลเยอร์ของกฎไดนามิกและกฎเฉพาะให้กับแอปพลิเคชันของเรา เพื่อให้มั่นใจว่าผู้ใช้จะได้รับประสบการณ์ที่แข็งแกร่งยิ่งขึ้นเมื่อทำเว็บ Angular และทำแอพ
4. การจัดการการส่งแบบฟอร์ม (Handling Form Submission)
เมื่อช่องแบบฟอร์มของคุณผ่านการตรวจสอบแล้ว ขั้นตอนสุดท้ายคือการจัดการการส่งแบบฟอร์ม ดังที่แสดงในตัวอย่างการสร้างแบบฟอร์มของเรา AngularJS ใช้ ng-submit คำสั่งเพื่อจัดการการส่งแบบฟอร์ม
คำ ng-submit สั่งสามารถชี้ไปที่ฟังก์ชันในตัวควบคุมของคุณ ฟังก์ชันนี้จะดำเนินการเมื่อมีการส่งแบบฟอร์ม โดยมีเงื่อนไขว่าแบบฟอร์มนั้นถูกต้อง เป็นสถานที่ที่สมบูรณ์แบบในการจัดการข้อมูลแบบฟอร์ม โดยปกติแล้วจะส่งไปยังเซิร์ฟเวอร์โดยใช้ $http บริการ
angular.module('myApp', [])
.controller('myController', function($scope, $http) {
$scope.email = '';
$scope.submitForm = function() {
var data = {
email: $scope.email
};
$http.post('/api/signup', data).then(
function(response) {
alert('Form submitted successfully.');
},
function(error) {
alert('An error occurred.');
}
);
};
});ในตัวอย่างนี้ submitForm ฟังก์ชันกำลังจัดการการส่งแบบฟอร์ม กำลังสร้างdataวัตถุจาก $scope.email คุณสมบัติซึ่งมีอินพุตฟอร์มเนื่องจากการผูกข้อมูลแบบสองทาง วัตถุข้อมูลนี้จะถูกส่งไปยังเซิร์ฟเวอร์โดยใช้$http.postเมธอด หากเซิร์ฟเวอร์ตอบสนองสำเร็จ ข้อความแสดงความสำเร็จจะปรากฏขึ้น หากมีข้อผิดพลาด ระบบจะแสดงข้อความแสดงข้อผิดพลาดแทน
กลไกการจัดการการส่งแบบฟอร์มนี้ช่วยให้คุณสามารถรวมข้อมูลที่ผู้ใช้ป้อนเข้าในแอปพลิเคชันของคุณได้อย่างราบรื่น ไม่ว่าคุณกำลังทำเว็บ Angular และทำแอพเชิงมุมหรือที่ซับซ้อนกว่าที่ขับเคลื่อนด้วยข้อมูล
5. คลาสการตรวจสอบแบบฟอร์ม (Form Validation Classes)
AngularJS ยังใช้คลาส CSS หลายคลาสกับอินพุตของฟอร์ม ซึ่งสามารถใช้เพื่อให้ความคิดเห็นที่เป็นภาพแก่ผู้ใช้ ชั้นเรียนเหล่านี้รวมถึง:
ng-valid: คลาสนี้ใช้เมื่ออินพุตถูกต้องng-invalid: คลาสนี้จะถูกนำไปใช้เมื่ออินพุตไม่ถูกต้องng-pristine: คลาสนี้ใช้เมื่อผู้ใช้ไม่ได้โต้ตอบกับอินพุตng-dirty: คลาสนี้ใช้เมื่อผู้ใช้โต้ตอบกับอินพุตng-touched: คลาสนี้ใช้เมื่ออินพุตหลุดโฟกัสng-untouched: คลาสนี้ใช้เมื่ออินพุตไม่หลุดโฟกัส
คลาสเหล่านี้สามารถใช้เพื่อใช้สไตล์เฉพาะกับฟิลด์อินพุตตามสถานะการตรวจสอบ โดยเสนอความคิดเห็นตามเวลาจริงแก่ผู้ใช้เมื่อกรอกแบบฟอร์ม ตัวอย่างเช่น คุณอาจต้องการเปลี่ยนเส้นขอบของช่องป้อนข้อมูลเป็นสีแดงเมื่อไม่ถูกต้อง
.ng-invalid {
border-color: red;
}ฟอร์มเป็นส่วนสำคัญในการทำเว็บ Angular และทำแอพเชิงโต้ตอบและไดนามิก และการทำเว็บ Angular และทำแอพก็ไม่มีข้อยกเว้น ด้วยคำสั่ง คุณสมบัติ และคลาสในตัวที่หลากหลายสำหรับการจัดการการสร้าง การตรวจสอบ และการส่งแบบฟอร์ม AngularJS มอบวิธีที่แข็งแกร่งและมีประสิทธิภาพในการจัดการกับแบบฟอร์ม
นอกจากนี้ AngularJS ยังเปิดใช้การตรวจสอบความถูกต้องแบบกำหนดเอง ให้คุณมีความยืดหยุ่นในการตั้งค่าตรรกะการตรวจสอบแบบฟอร์มตามความต้องการของคุณ เมื่อรวมกับการเชื่อมโยงข้อมูลแบบสองทางที่ทรงพลังแล้ว การจัดการแบบฟอร์มใน AngularJS ไม่เพียงแต่จะง่ายขึ้นเท่านั้น แต่ยังมีประสิทธิภาพและเชื่อถือได้มากขึ้นอีกด้วย
ดังนั้น ไม่ว่าคุณกำลังทำเว็บ Angular และทำแอพแบบฟอร์มติดต่อง่ายๆ แบบฟอร์มลงทะเบียนที่ซับซ้อน หรือแบบฟอร์มการป้อนข้อมูลที่ซับซ้อน AngularJS นำเสนอเครื่องมือและฟังก์ชันที่จำเป็นในการสร้างแบบฟอร์มที่เป็นมิตรต่อผู้ใช้และเชื่อถือได้