การจัดการ Forms ด้วย AngularJS

Form ใน HTML นั้นถือว่าเป็นสิ่งหนึ่งที่ขาดไม่ได้หากเว็บไซด์นั้นๆ ต้องมีการเก็บข้อมูลต่างๆ. ใน AngularJS เองก็ยังมีฟังก์ชั่นมากมายเพื่อรองรับการจัดการ HTML Element ที่อยู่ใน Form เช่น

• input elements
• select elements
• button elements
• textarea elements

โดยมี Event ต่างๆที่รองรับ Form Elements เหล่านี้ เช่น

• ng-click
• ng-dbl-click
• ng-mousedown
• ng-mouseup
• ng-mouseenter
• ng-mouseleave
• ng-mousemove
• ng-mouseover
• ng-keydown
• ng-keyup
• ng-keypress
• ng-change

ตัวอย่างการใช้งาน ng-click เพื่อ reset ข้อมูล เช่น

นอกจาก Event แล้วยังมีฟังก์ชั่นสำหรับ Client Side Validate อีกด้วย เช่น

• $dirty − เชคสถานะของ Field ว่ามีการเปลี่ยนแปลงแล้ว. 
• $invalid − เชคความถูกต้องของข้อมูลที่ป้อนกรณีไม่ถูกต้อง. 
• $error − เชค Error.

ตัวอย่าง

AngularJS Sample Application

    

        

            

                

                    
Enter first name:
                    

                        
                        
                        First Name is required.
                        
                    
                
                

                    
Enter last name: 
                    

                        
                        
                        Last Name is required.
                    
                
                

                    
Email: 
                    

                        
                        
                        Email is required.
                        Invalid email address.
                    
                
                

                    

                        
                    
                    

                        
                    
                
            
        
    

ผลลัพธ์

กรณีไม่ป้อนข้อมูล

กรณีป้อนข้อมูลผิด

กรณีกดปุ่ม Reset

About Nop

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.