PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

24 August 2014 By


เราได้เคยศึกษา เกี่ยวกับ การใช้งาน 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:: property angularjs form controller

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

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


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





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