AngularJS - Forms

Quiz

AngularJS enriches form filling and validation. We can use ng-click event to handle the click button and use $dirty and $invalid flags to do the validation in a seamless way. Use novalidate with a form declaration to disable any browser-specific validation. The form controls make heavy use of AngularJS events. Let us have a look at the events first.

Events

AngularJS provides multiple events associated with the HTML controls. For example, ng-click directive is generally associated with a button. AngularJS supports the following events −

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 data of a form using on-click directive of a button.

Validate Data

The following can be used to track error.

$dirty − states that value has been changed.
$invalid − states that value entered is invalid.
$error − states the exact error.

Example

The following example will showcase all the above-mentioned directives.

testAngularJS.htm


   
      Angular JS Forms
      
      
      
      
   
   
      
      AngularJS Sample Application
      
         
         
            
               
                  Enter first name:
                  
                     
                        First Name is required.
                     
                  
               
               
               
                  Enter last name: 
                  
                     
                        Last Name is required.
                     
                  
               
               
               
                  Email: 
                     
                        Email is required.
                        Invalid email address.

Output

Open the file testAngularJS.htm in a web browser and see the result.

Print Page