PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ตรวจสอบ form ด้วย property formcontroller ใน angularjs ตอนที่ 8

26 August 2014 By


เนื้อหาในตอนนี้ จะเป็นการประยุกต์ใช้งาน สิ่งที่เราได้รู้
เกี่ยวกับ property formcontroller โดยจะใช้ในการสร้าง form
และตรวจสอบ form
 
บทความที่เกี่ยวข้องก่อนหน้า
ทบทวน property ของ formcontroller ใน angularjs ตอนที่ 6 
http://www.ninenik.com/content.php?arti_id=528 via @ninenik
ภาคต่อ error property ของ formcontroller ใน angularjs ตอนที่ 7 
http://www.ninenik.com/content.php?arti_id=529 via @ninenik
 
ก่อนเริ่ม ขอแนะนำ css ของ bootstrap ที่จะมีการใช้งาน
 
has-error  เป็น css class ที่ใช้ร่วมกับ form-group สำหรับแสดงผล ส่วนของเนื้อหา หรือ element ที่อยู่ภายใน css นี้ ให้เป็นไปในลักษณะ การ hilight แจ้ง error 
text-danger เป็น css class สำหรับใช้กับแท็ก span กำหนดการแสดงข้อความในลักษณะ การแจ้ง error
 
ดูโค้ดเกี่ยวกับการใช้งานกับ input type email ประกอบ
 
 
 
           <div class="form-group"  ng-class="{'has-error': myForm.email.$invalid && !myForm.email.$pristine}">
                <label class="control-label" for="email">Email :</label>
                <input type="email" class="form-control" name="email" ng-model="email" required />
                <span ng-show="myForm.email.$error.required && !myForm.email.$pristine" class="text-danger">
                Required</span>   
                <span ng-show="myForm.email.$error.email" class="text-danger"> Not a Email</span>                   
            </div>
 
จากโค้ดด้านบน ประกอบไปด้วย
 
div 
label 
input type email
span 2 อัน
 
ดูไปทีละตัว 
 
<div class="form-group">
...
</div>
 
ตัวนี้จะคลุมด้านนอก ถ้ามีการเช็คก input type email แล้วเกิดข้อผิดพลาด
ก็จะถูก กำหนดให้ มี css class ชื่อ has-error เพื่มเข้ามา โดยเมื่อ css นี้เพิ่มเข้ามา
จะทำให้ส่วนต่างๆด้านใน แสดงในลักษณะแบบ error เช่น ข้อความเป็นสีแดง
input type มี hilight ขอบเป็นสีแดง แบบนี้เป็นต้น
 
<div class="form-group has-error">

</div>
 
โค้ดด้านบนที่มีการเพิ่ม css เข้ามา ได้มาจากการใช้งาน ng-class directive
 
<div class="form-group"  ng-class="{'has-error': myForm.email.$invalid && !myForm.email.$pristine}">
...
</div>
 
เทียบอย่างง่าย
 
<div class="form-group"  ng-class="{'css class ที่จะใช้': ตรวจสอบ element หรือ input type email ที่ต้องการ}">
...
</div>
 
ดังนั้น 
{'has-error': myForm.email.$invalid && !myForm.email.$pristine}
{'เพิ่ม class ชื่อ has-error': (email ไม่ถูกต้อง และ (ตรงช้าม)ยังไม่กรอกข้อมูล}
{'เพิ่ม class ชื่อ has-error': (email ไม่ถูกต้อง และ กรอกข้อมูลแล้ว}
{'เพิ่ม class ชื่อ has-error': (กรอกข้อมูลแล้ว และ email ไม่ถูกต้อง}
ตามเงื่อนไขด้านบน ถ้าเป็นจร้ง หรือ ถ้ากรอกข้อมูลแล้ว และข้อมูลที่กรอกมีรูปแบบ
email ไม่ถูกต้อง ก็จะเป็น true ดังนั้น css class has-error จะถูกเพิ่มเข้าไปใน div
 
ตัวต่อมา label
 
<label class="control-label" for="email">Email :</label>
 
label นี้จะมี css class ชื่อ control-label ซึ่งจะมีผลตาม has-error ของ div ด้านนอก
คือมี hilight สีแสดงของข้อความ
 
ต่อมา input type email

<input type="email" class="form-control" name="email" ng-model="email" required />
 
input type email นี้จะมี css class ชื่อ form-control และจะมีผลตาม has-error โดย
ถ้าเกิดข้อผิดพลาด ก็จะแสดง ขอบเป็นสีแดง 
 
ต่อมา span ตัวแรก 

<span ng-show="myForm.email.$error.required && !myForm.email.$pristine" class="text-danger">Required</span>
 
span ตัวนี้จะใช้สำหรับแจ้งว่า ถ้าเกิดข้อผิดพลาด เช่น input type email ไม่ได้กรอก
ข้อมูล ส่วนนี้ก็จะแสดง โดยใช้ css class ชื่อ text-danger เพื่อกำหนดให้เป็นข้อความสีแดง
 
จะเห็นว่า span ตัวนี้ กำหนดการแสดง โดยการใช้ ng-show directive 
ดูอธิบาย แบบเป็นลำดับ

ng-show="myForm.email.$error.required && !myForm.email.$pristine"
แสดง span นี้ = " error เป็นค่าว่าง และ (ตรงข้าม)ยังไม่กรอกข้อมูลแล้ว"
แสดง span นี้ = " error เป็นค่าว่าง และ กรอกข้อมูลแล้ว"
แสดง span นี้ = " กรอกข้อมูลแล้ว และ error เป็นค่าว่าง" // คือพิมพ์แล้วลบ
ตามเงื่อนไข ถ้าผู้ใช้ได้เข้าไปใช้งาน เช่น ลองพิมพ์ข้อมูลไปแล้ว แต่เกิดลบ
ข้อมูลออก จนกลายเป็นค่าว่าง ค่าก็จะเป็น true span แจ้งเตือนก็จะแสดง
 
ตัวสุดท้าย span ตัวที่สอง

<span ng-show="myForm.email.$error.email" class="text-danger"> Not a Email</span>
 
span ตัวนี้แสดง ข้อความเช็คเพิ่มเติม ว่ารูปแบบ email ที่กรอกถูกต้องหรือไม่ โดยใช้ css class ชื่อ text-danger เพื่อกำหนดให้เป็นข้อความสีแดง ถ้ารูปแบบ email ไม่ถูกต้อง
 
span ตัวนี้ กำหนดการแสดง โดยการใช้ ng-show directive 
ดูอธิบาย แบบเป็นลำดับ
แสดง span นี้ = " error รูปแบบ email ไม่ถูกต้อง และ (ตรงข้าม)ยังไม่กรอกข้อมูลแล้ว"
แสดง span นี้ = " error รูปแบบ email ไม่ถูกต้อง และ กรอกข้อมูลแล้ว"
แสดง span นี้ = " กรอกข้อมูลแล้ว และ error รูปแบบ email ไม่ถูกต้อง" 
ผลตามเงื่อนไข span ตัวที่ 2 นี้จะแสดง เมื่อเงื่อนไขเป็น true นั้นคือ กรอกข้อมูลแล้ว
แต่ข้อมูลที่กรอกไม่ใช้รูปแบบของ email 






 
มาดูเพิ่มอีกอัน
 
<button type="submit" ng-disabled="myForm.$invalid" class="btn btn-primary">Submit</button>
 
ปุ่ม submit นี้มีการตรวจสอบ form และกำหนดการใช้งาน คือ ถ้า ฟอร์ม กรอกข้อมูล
ไม่ครบ ตามรายการที่กำหนด required หรือ มีรายการบางรายการ มีรูปแบบไม่ถูกต้อง
ปุ่มนี้ก็จะถูกกำหนดให้ เป็น disabled หรือ ก็คือ กดแล้วไม่มีผลหรือไม่ทำงาน
 
การตรวจสอบ form นี้ ใช้ ng-disabled directive
ดูอธิบาย แบบเป็นลำดับ
ng-disabled="myForm.$invalid" 
ให้ disabled = "ฟอร์มมีรายการที่ ยังไม่ถูกต้อง เช่น กรอกไม่ครบ หรือรูปแบบไม่ถูกต้อง"
เมื่อเปิดเข้ามาครั้งแรก เราจะพบว่า ปุ่มนี้จะ disabled อยู่ เพราะ
ให้ disabled = "ฟอร์มมีรายการที่ ยังไม่ถูกต้อง เช่น กรอกไม่ครบ หรือรูปแบบไม่ถูกต้อง"
ให้ disabled = true
 
ปุ่ม submit นี้ จะพร้อดเมื่อ disabled = false ซึ่งก็คือ มีการกรอกข้อมูลครบถ้วนและถูกต้อง
 
ทั้งหมดนี้ ก็คือการประยุกต์ใช้งาน property formcontroller ตรวจสอบ form
โดย ใช้งานร่วมกับ css ในที่นี้ใข้ร่วมกับ css bootstrap (เคยแนะนำไว้ในตอนที่ 3) 
 
เพิ่ม ลบ แก้ไข รายการ ด้วย angularjs ตอนที่ 3 
http://www.ninenik.com/content.php?arti_id=517 via @ninenik
 
โค้ดสำหรับเป็นรูปแบบ ใช้ในการสร้าง form และการตรวจสอบ form ร่วมกับ
การใช้งาน css bootstrap
 
<!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" ng-class="{'has-error': myForm.name.$invalid && !myForm.name.$pristine}">
               <label class="control-label" for="name">Name :</label>
               <input type="text" name="name" ng-model="name"  class="form-control" required />
               <span ng-show="myForm.name.$error.required && !myForm.name.$pristine" class="text-danger">   
                Required</span>  
           </div>
           <div class="radio">
               <label class="radio-inline">
                   <input type="radio" name="gender" ng-model="gender"/>Male
               </label> 
               <label class="radio-inline">
                   <input type="radio" name="gender" ng-model="gender" />Female
               </label>
           </div>
            <div class="form-group" ng-class="{'has-error': myForm.site.$invalid && !myForm.site.$pristine}">
                <label class="control-label" for="site">Website :</label>
                <input type="url" class="form-control" name="site" ng-model="site" required />
                <span ng-show="myForm.site.$error.required && !myForm.site.$pristine" class="text-danger">   
                Required</span>   
                <span ng-show="myForm.site.$error.url" class="text-danger"> Not a URL</span>                 
            </div>
            <div class="form-group"  ng-class="{'has-error': myForm.email.$invalid && !myForm.email.$pristine}">
                <label class="control-label" for="email">Email :</label>
                <input type="email" class="form-control" name="email" ng-model="email" required />
                <span ng-show="myForm.email.$error.required && !myForm.email.$pristine" class="text-danger">Required</span>   
                <span ng-show="myForm.email.$error.email" class="text-danger"> Not a Email</span>                   
            </div>
            <div class="form-group">
                <label for="desc">Description :</label>
                <textarea name="desc"  class="form-control" rows="3">{{desc}}</textarea>
            </div>
            <div class="checkbox">
                <label>
                <input type="checkbox" name="acept" ng-model="acept" required /> Acept our terms and conditions?
                </label>
            </div>
            <a href="#/" class="btn btn-default">Cancel</a>  
            <button type="submit" ng-disabled="myForm.$invalid" class="btn btn-primary">Submit</button>
        </form>
        <br>

        
    </div>



</body>
</html>
 
ไฟล์ app.js
 
angular.module("app",[]) 
.controller("appController",["$scope",function($scope){
//    $scope.name="test";
}]);
 
 
ตัวอย่าง
 
 
 
จบสำหรับตอนนี้ รอติดตามตอนต่อไป

Tags:: angularjs ตรวจสอบ controller form property

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





URL สำหรับอ้างอิง