ทบทวน property ของ formcontroller ใน angularjs ตอนที่ 6

เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee
angularjs controller property form

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

ดูแล้ว 7,637 ครั้ง


เราได้เคยศึกษา เกี่ยวกับ การใช้งาน form มาแล้วในเนื้อหาก่อนหน้า
เพิ่ม ลบ แก้ไข รายการ ด้วย angularjs ตอนที่ 3 
 
ในตอนนี้ เราจะมาเจาะลืก ถึงการใช้งาน form.FormController ใน angularjs
 
*ย้ำ หมายเหตุ บทความ angularjs เราจะใช้คู่ไปกับการใช้งาน css ของ bootstrap
ดึงนั้น css class ที่กล่าวถึง จะเป็น css ของ bootstrap ทั้งหมด
 
form.FormController คือ element ต่างๆ ที่อยู่ในแท็ก form
ไม่ว่าจะเป็น input type text ,radio,checkbox ,textarea เหล่านี้เป็นต้น
 
มารู้จัก property ของ FormController 
ขอยกตัวอย่างรูปแบบ form ง่ายๆ ประกอบคำอธิบาย
 
<form name="myForm" role="form">
    <div class="form-group">
        <label class="control-label">Name : </label>
        <input type="text" name="name" class="form-control" ng-model="name" required />
    </div>
</form>
 
1. $pristine  คือ ถ้าไม่มีการทำอะไรกับ element นั้น จะเป็น true
 
เช่น myForm.name.$pristine  อธิบายคือ 
เมื่อเราเปิดเพจ หน้าที่มีฟอร์มนี้ขึ้น มาครั้งแรก 
input type ชื่อ name ค่า myForm.name.$pristine จะมีค่าเป็น true
แต่เมื่อเราพิมพ์อะไรลงไป ค่าตัวนี้จะเป็น false
 
2. $dirty  คือ ตรงข้ามกับ $pristine ถ้ามีการกระทำอะไรกับ element นั้นแล้ว
 จะเป็น true
 
เช่น myForm.name.$dirty  อธิบายคือ 
เมื่อเราเปิดเพจ หน้าที่มีฟอร์มนี้ขึ้น มาครั้งแรก 
input type ชื่อ name ค่า myForm.name.$dirty จะมีค่าเป็น false
แต่เมื่อเราพิมพ์อะไรลงไป ค่าตัวนี้จะเป็น true
 
3. $valid  คือ ถ้ามีการกระทำใดๆ กับ element นั้น แล้ว รูปแบบ และข้อมูลมีความ
ถูกต้อง เช่น ถ้าเป็น input type email เมื่อมีการกรอกข้อมูล และข้อมูลอยู่ในรูปแบบ
email แล้วเท่านั้น ค่า valid จึงจะเป็น true 
ปกติค่านี้ปกติเร่ิมต้นจะเป็น false 
 
กรณี myForm.name.$valid  อธิบายคือ 
เมื่อเราเปิดเพจ หน้าที่มีฟอร์มนี้ขึ้น มาครั้งแรก 
input type ชื่อ name ค่า myForm.name.$valid จะมีค่าเป็น false
แต่เมื่อเราพิมพ์อะไรลงไป ค่าตัวนี้จะเป็น true ทันที โดยไม่ได้อิงรุปแบบต้องถูก
แบบ email 
 
4. $invalid  คือ ตรงข้าม กับ $valid 
 
กรณี myForm.name.$invalid  อธิบายคือ 
เมื่อเราเปิดเพจ หน้าที่มีฟอร์มนี้ขึ้น มาครั้งแรก 
input type ชื่อ name ค่า myForm.name.$invalid จะมีค่าเป็น true
แต่เมื่อเราพิมพ์อะไรลงไป ค่าตัวนี้จะเป็น false โดยรูปแบบต้องตรงกับ
type ด้วย เช่น กรณี input type email ต้องมีข้อมูล และรูปแบบที่ถูกต้อง
 
5. $error  ตัวสุดท้าย จะคืนค่าต่างจาก 4 ตัวด้านบน 
ค่าที่ได้จาก $error จะเป็น object 
โดย key คือ error names
เช่น  myForm.name.$error
 
{"required":true,"email":false}
 
โค้ดทดสอบ 
 
<!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">
            <label class="control-label">Name :</label>
            <input type="text" name="name" class="form-control" ng-model="name" required />
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
 
       <br>
        <pre>
            <span>myForm.name.$pristine : {{myForm.name.$pristine}}</span>
            <span>myForm.name.$dirty : {{myForm.name.$dirty}}</span>
            <span>myForm.name.$valid : {{myForm.name.$valid}}</span>
            <span>myForm.name.$invalid : {{myForm.name.$invalid}}</span>
            <span>myForm.name.$error : {{myForm.name.$error}}</span>
        </pre>              
               
    </div>



</body>
</html>


ไฟล์ app.js

angular.module("app",[]) 
.controller("appController",["$scope",function($scope){
//    $scope.name="test";
}]);
 
ตัวอย่างผลลัพธ์
 
 
 
สำหรับ property ของ formcontroller ก็จะมี 5 รายการ ตามด้านบน
แต่ในข้อ 5 จะมีรายละเอียดการใช้งาน เพิ่ม 
จะขอต่อเนื้อหาเกี่ยวกับ formcontroller ต่อในบทความหน้า รอติดตาม


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











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





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

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


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


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







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