PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

24 August 2014 By
angularjs form property controller

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



เราได้เคยศึกษา เกี่ยวกับ การใช้งาน form มาแล้วในเนื้อหาก่อนหน้า
เพิ่ม ลบ แก้ไข รายการ ด้วย angularjs ตอนที่ 3 
http://www.ninenik.com/content.php?arti_id=517 via @ninenik
 
ในตอนนี้ เราจะมาเจาะลืก ถึงการใช้งาน form.FormController ใน angularjs
 
*ย้ำ หมายเหตุ บทความ angularjs เราจะใช้คู่ไปกับการใช้งาน css ของ bootstrap
ดึงนั้น css class ที่กล่าวถึง จะเป็น css ของ bootstrap ทั้งหมด
http://getbootstrap.com/css/#forms
 
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 ต่อในบทความหน้า รอติดตาม






Tags:: form property angularjs controller




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

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


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



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


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