ภาคต่อ error property ของ formcontroller ใน angularjs ตอนที่ 7

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

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

ดูแล้ว 6,034 ครั้ง


เนื้อหาต่อจากบทความก่อนหน้า
ทบทวน property ของ formcontroller ใน angularjs ตอนที่ 6 
 
$error property ของ formcontroller ซึ่งเป็น 1 ใน 5 property
ที่มี $prisine $dirty $valid $invalid และ $error
 
โดย $error จะมี error name ทั้งหมด 9 อัน 
 
max ต้องอยู่ในรูปแบบตัวเลขที่กรอก น้อยกว่าหรือเท่ากับ max ที่กำหนด
required  รูปแบบที่จำเป็นต้องกรอกข้อมูล 
maxlength  ต้องอยู่ในรูปแบบจำนวนข้อความที่กรอกไม่เกิน
min  ต้องอยู่ในรูปแบบตัวเลขที่กรอก มากกว่าหรือเท่ากับ min ที่กำหนด
minlength  ต้องอยู่ในรูปแบบจำนวนข้อความที่กรอกอย่างน้อย
number ต้องอยู่ในรูปแบบของการกรอกตัวเลข
pattern   ต้องอยู่ในรูปแบบ regular expression หรือรูปแบบ ที่เราเขียนขึ้น
email  ต้องอยู่ในรูปแบบ email
url  ต้องอยู่ในรูปแบบ url
 
โดยการกำหนด ใน html ในกรณี maxlength เราจะใช้ ng directive นำหน้า
เป็น ng-maxlength แทน 
เนื่องจากคำว่า maxlength จะไปซ้ำกับ attribute เดิมของ html ที่ใช้จำกัด
จำนวนข้อความที่แสดง input
 
มาดูโค้ดตัวอย่างส่วนของการเช็ค min max required minlength number
 
<!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" ng-minlength="2"  required />
        </div>
        <div class="form-group">
            <label class="control-label">Number :</label>
            <input type="number" name="number" class="form-control" ng-model="number" min="4" max="12" required />
        </div>    
        <div class="form-group">
            <label class="control-label">Description :</label>
            <textarea name="desc" class="form-control" ng-model="desc" row="3" ng-maxlength="15"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
 
       <br>
        <pre>
            <span>myForm.name.$error.required : {{myForm.name.$error.required}}</span>
            <span>myForm.name.$error.minlength : {{myForm.name.$error.minlength}}</span>
            <span>myForm.number.$error.number : {{myForm.number.$error.number}}</span>
            <span>myForm.number.$error.min : {{myForm.number.$error.min}}</span>
            <span>myForm.number.$error.max : {{myForm.number.$error.max}}</span>
            <span>myForm.desc.$error.maxlength : {{myForm.desc.$error.maxlength}}</span>
        </pre>              
               
    </div>



</body>
</html>
 
โค้ดไฟล์ app.js
 
angular.module("app",[]) 
.controller("appController",["$scope",function($scope){

}]);
 
ตัวอย่างผลลัพธ์
 
 
ให้เราสังเกตด้วยชื่อ คำว่า error คือ ข้อผิดพลาด ดังนั้น error = false คือ
ไม่มีข้อผิดพลาด ให้เข้าใจตามนี้ 
 
สรุปก็คือถ้าเราเอาค่า error ไป เช็คกับ form ค่า error จะต้องเป็น false ทั้งหมด
นั้นหมายถึง ไม่มีข้อผิดพลาดเกิดขึ้น  
 
แต่สังเกตว่า เวลาเราเปิดขึ้นมาครั้งแรก error เป็น false หมด (ยกเว้นใช้กับ required ที่เนื่องจากยังไม่ได้กรอกข้อมูล) ดังนั้น การเช็ค errror ต้องเช็คควบคุู่ไปกับ $valid คือ ต้องมีข้อมูลหรือมีการกรอกข้อมูล ก่อน เป้นต้น
 
อธิบายเพิ่ม  กรณียังไม่กรอกข้อมูล เมื่อโหลดมาครั้งแรก
 myForm.name.$error.required : true   // ผิดพลาดเป็น จริง ชื่อต้องกรอก
 myForm.name.$error.minlength : false  // ผิดพลาด ยังไม่มีข้อมูล
 myForm.number.$error.number : false  // ผิดพลาด ยังไม่มีข้อมูล
 myForm.number.$error.min : false  // ผิดพลาด ยังไม่มีข้อมูล
 myForm.number.$error.max : false  // ผิดพลาด ยังไม่มีข้อมูล
 myForm.desc.$error.maxlength : false  // ผิดพลาด ยังไม่มีข้อมูล
 
อธิบายเพิ่ม  กรณียังกรอกข้อมูลแล้ว และข้อมูลเป็นไปตามเงื่อนไข
 myForm.name.$error.required : false 
 // มีการกรอกข้อมูล ไม่มีค่าว่าง ไม่มีข้อผิดพลาด
 myForm.name.$error.minlength : false 
// ถ้ากรอกตัวอักษรอย่างน้อย 2 ตัวขึ้นไป (ตามที่กำหนด minlength="2") ไม่มีข้อผิดพลาด
 myForm.number.$error.number : false
// ถ้ากรอกที่เป็นตัวเลข ไม่มีข้อผิดพลาด 
 myForm.number.$error.min : false
// ถ้ากรอกเป็นตัวเลขมากกว่าหรือเท่ากับ 4 (min="4") ไม่ผิดพลาด
 myForm.number.$error.max : false
// ถ้ากรอกเป็นตัวเลขน้อยกว่าหรือเท่ากับ 12 (max="12") ไม่ผิดพลาด
 myForm.desc.$error.maxlength : false
// ถ้ากรอกข้อมูลไม่เกิน 15 ตัวอักษร (maxlength="15") ไม่ผิดพลาด 
// ปกติตัวนี้ไม่ค่อยใช้งาานเท่าไหร่
 
 


 
มาดูอีก 3 อันที่เหลือ pattern email url
 
ตัวอย่างโค้ด
 
<!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">Website :</label>
            <input type="url" name="site" class="form-control" ng-model="site"  required />
        </div>
        <div class="form-group">
            <label class="control-label">Email :</label>
            <input type="email" name="email" class="form-control" ng-model="email" required />
        </div>    
        <div class="form-group">
            <label class="control-label">Pattern :</label>
            <input type="text" name="pattern" class="form-control" ng-model="pattern" pattern="([:digit:])" required />
        </div>            
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
 
       <br>
        <pre>
            <span>myForm.site.$error.url : {{myForm.site.$error.url}}</span>
            <span>myForm.email.$error.email : {{myForm.email.$error.email}}</span>
            <span>myForm.pattern.$error.pattern : {{myForm.pattern.$error.pattern}}</span>
        </pre>              
               
    </div>



</body>
</html>
 
ไฟล์ app.js เหมือนด้านบน
 
ตัวอย่างผลลัพธ์
 
 
อันนี้ก็เหมือนเดิม คำว่า error คือ ข้อผิดพลาด ดังนั้น error = false คือ
ไม่มีข้อผิดพลาด ให้เข้าใจตามนี้ (ยกเว็น pattern ต้องเป็น true)
 
อธิบายเพิ่ม  กรณียังกรอกข้อมูลแล้ว และข้อมูลเป็นไปตามเงื่อนไข
myForm.site.$error.url : false
// ถ้า มีการกรอก url ถูกต้องตามรูปแบบ http://xxxx แสดงว่าไม่ผิดพลาด
myForm.email.$error.email : false
// ถ้า มีการกรอก email ถูกต้องตามรูปแบบ xxx@xxx.xxx แสดงว่าไม่ผิดพลาด
myForm.pattern.$error.pattern : true
// ถ้ากรอกข้อมูลในรูปแบบ regular expression หรือรูปแบบ ที่เราเขียนขึ้น แสดงว่าไม่ผิดพลาด 
// ในตัวอย่าง ([:digit:]) คือ pattern ที่ต้องเป็นเฉพาะตัวเลข 0-9 เท่านั้น ถ้าเราเพิ่ม
// ที่เป็นตัวเลข ค่า $error.pattern จะเป็น true แสดงว่าไม่มีข้อผิดพลาด
// ดังนั้น $error.pattern ที่เป็น false จึงหมายถึง กรอกข้อมูลไม่ตรงตามรูปแบบที่กำหนด
 
 
ในตอนหน้า เราจะใช้ค่าต่างๆ จากทั้งสองตอนที่ผ่านมา นี้มาประยุกต์
ใช้ในการกำหนด css แจ้งเตือนการกรอกข้อมูล ตามเงื่อนไขของ error รอติดตาม


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











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





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

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


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


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







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