In angularjs, form provides data-binding and validation of input controls.It provide form filling and form validation in angularjs. Input controls helps for user enter the data and a form is a collection of controls for the purpose of grouping related controls together.

Following are the input controls used in AngularJS forms:

1. input elements
2. select elements
3. button elements
4. textarea elements

Data-Binding

Input controls provides data-binding by using the ng-model directive. The ng-model directive is used to provide data binding.

Example

Let us take an example where ng-model directive binds the input controller to the rest of your application

  
  
  
  
  
  
  
    First Name:   
  
  
  
  
  
   

You can also change the example in the following way:

  
  
  
  
  
  
  
    First Name:   
  
  
  
You entered: {{firstname}}
  
  
  

AngularJS – Checkbox

In checkbox, it has two values either true or false. The ng-model directive is used for a checkbox.

Example

  
  
  
  
  
  
  
    Check to show this:  
      
  
  
  
Checked
  
  
  
  

The ng-show attribute is set to true when the checkbox is checked.

AngularJS – Radio Buttons

Adding radio button into your angularjs application through ng-model directives.

Example

  
  
  
  
  
  Pick a Data:  
  Orange
  Apple  
  Mango 
  
  
  
  
  
     
Orange
  
  
  
  
  
     
Apple
  
  
  
  
  
     
Mango
  

	 
  
  
  
  

The ng-switch directive hides and shows HTML sections depending on the value of the radio buttons.

AngularJS – Select Box

The ng-model directive is used for a selectbox.

Example

  
  
  
  
  
  Select a Data:  
    
      
    Orange  
    Apple
    Mango 
    
  
  
  
  
     
Orange
  
  
  
  
  
     
Apple
  
  
  
  
  
     
Mango
  
  
  
  
  
  

The ng-switch directive hides and shows HTML sections depending on the value of the radio buttons.

AngularJS form example

  
  
     
        
        
        
        
        
     
     
        
      
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  
                  
  
                  
  
                     Submit