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

เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee
controller property form angularjs ตรวจสอบ

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ controller property form angularjs ตรวจสอบ

ดูแล้ว 10,111 ครั้ง


เนื้อหาในตอนนี้ จะเป็นการประยุกต์ใช้งาน สิ่งที่เราได้รู้
เกี่ยวกับ property formcontroller โดยจะใช้ในการสร้าง form
และตรวจสอบ form
 
บทความที่เกี่ยวข้องก่อนหน้า
ทบทวน property ของ formcontroller ใน angularjs ตอนที่ 6 
ภาคต่อ error property ของ formcontroller ใน angularjs ตอนที่ 7 
 
ก่อนเริ่ม ขอแนะนำ 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 
 
โค้ดสำหรับเป็นรูปแบบ ใช้ในการสร้าง 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";
}]);
 
 
ตัวอย่าง
 
 
 
จบสำหรับตอนนี้ รอติดตามตอนต่อไป


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ