Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Data Binding
3.
Input Types in AngularJS Forms
3.1.
Input Fields
3.2.
Dropdowns or Select
3.3.
Checkboxes and Radio Buttons
4.
Validation in AngularJS Forms
5.
FAQs
6.
Key Takeaways
Last Updated: Mar 27, 2024

AngularJS Forms

Author Gunjeev Singh
2 upvotes
gp-icon
Basics of Javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

AngularJS is a web framework built in Javascript by Google. An important thing to note when discussing the features of AngularJS is that it is structural as well. In the world of web development, the MEAN stack is one of the most prominent technical stacks. Knowing the nuances of AngularJS is an essential aspect of being a good MEAN stack developer. 
 

AngularJS extends the powers of HTML. Forms are a part of HTML also, but the power that AngularJS extends here is the power to validate forms in real-time. Developers can use AngularJS to change the HTML structure of the page in real-time using the validation response from the forms. 
 

Forms, simply defined, are a collection of input controls. There are various types of form inputs, and they may range from simple text inputs to checkboxes and dropdowns. This blog will look into the different types of form inputs and how we can validate them using AngularJS. 

Data Binding

Data binding in AngularJS refers to the sync of data between model and view components of the application. In most frameworks, the binding is one-sided. This means that the framework links the model component to the view component once. Any changes to the model components after that are not reflected in the view. This is where we see AngularJS’s true power. Data binding works two-ways in AngularJS. Essentially, it opens a live link between the model and view components in the browser. Any user interaction with the model components is immediately reflected in the view components as well.

 

In AngularJS, the ng-model directive is used to provide data binding. Now let's have a look at the various types of form input.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Input Types in AngularJS Forms

A form can have a lot of different types of controls. This blog will look into the most commonly used form input controls. We will look into the syntax, nuances, and uses of Input fields, checkboxes, radio buttons, Buttons, Dropdowns. Let us start with input fields.

Input Fields

Input fields are used to take text input. For example, a form may require users to input their names or address; input fields come into play. The syntax for input fields in AngularJS forms is as follows:

<input type="text" value="name" ng-model="name" placeholder="name">

 

The placeholder tag keeps a preset value to help users identify this field’s demands. We can put a lot of other tags into place to add validation techniques. These constraints make AngularJS Forms so powerful and efficient. 

 

Let us see how to use input fields in AngularJS forms. 

 

Code:

<!DOCTYPE html>
<html>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
 <body>
   <div ng-app="">
     <form>Name:
       <input type="text" ng-model="name" /></form>
       <h2>Name entered: {{name}}</h2>
   </div>
 </body>
</html>

Output

 

In the above code, a form has an input field used to take input for a user’s name. The name is then displayed. To store the input value, we use directives to bind the input. 

Dropdowns or Select

Select or Dropdowns are used to input a predefined choice. The user has to select a value from the given list. Whatever value the user selects gets stored in the variable defined by the ng-model directive. 
 

Code:

<!DOCTYPE html>
<html>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
 <body ng-app="">
   <form>
     Select a letter:
     <select ng-model="letter">
       <option value="A">A</option>
       <option value="B">B</option>
       <option value="C">C</option>
       <option value="D">D</option>
     </select>
   </form>

   <div ng-switch="letter">
     <div ng-switch-when="A">
       <h1>Selected letter is: A</h1>
     </div>
     <div ng-switch-when="B">
       <h1>Selected letter is: B</h1>
     </div>
     <div ng-switch-when="C">
       <h1>Selected letter is: C</h1>
     </div>
     <div ng-switch-when="D">
       <h1>Selected letter is: D</h1>
     </div>
   </div>
 </body>
</html>

Output



In the above code snippet, a form is made to contain a dropdown. There are four options for the user to select. Whatever option is selected, it gets doubly bound to the variable named 

letter using the ng-model directive. 

Checkboxes and Radio Buttons

Checkboxes and Radio Buttons are two more inputs we can take from users when working with AngularJS forms. In a checkbox, the variable bound to it is of type boolean. Its value is true if the box is checked; else, it is false. Radio buttons are a little different than checkboxes. Even though they have just two states, they only allow one radio button to be selected from a group of buttons. They can, in a sense, act like select or dropdowns. 
 

Code for checkbox:

<!DOCTYPE html>
<html>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
 <body ng-app="">
   <form>
       Checkbox selected:
       <input type="checkbox" ng-model="checkbox">
     </form>

     <h1 ng-show="checkbox">Checkbox selected</h1>
 </body>
</html>

 

Output

 

Code for radio buttons:

<!DOCTYPE html>
<html>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
 <body ng-app="">
   <form>
       Pick a topic:
       <input type="radio" ng-model="letter" value="A">A
       <input type="radio" ng-model="letter" value="B">B
       <input type="radio" ng-model="letter" value="C">C
       <input type="radio" ng-model="letter" value="D">D
     </form>
    
     <div ng-switch="letter">
       <div ng-switch-when="A">
         <h1>Selected letter is: A</h1>
       </div>
       <div ng-switch-when="B">
         <h1>Selected letter is: B</h1>
       </div>
       <div ng-switch-when="C">
         <h1>Selected letter is: C</h1>
       </div>
       <div ng-switch-when="D">
         <h1>Selected letter is: D</h1>
       </div>
     </div>
 </body>
</html>

Output

Validation in AngularJS Forms

Perhaps the single most crucial feature of AngularJS Forms is the validation checks that it offers. The following list shows some of the standard states associated with input types.

  • $untouched: Depicts that the field is untouched. 
  • $touched: Depicts that the user has touched the fields. 
  • $pristine: Depicts an unmodified field. 
  • $dirty: This shows that the field is modified.
  • $valid: It specifies that the field content is valid.

These validating checks can either be true or false.

FAQs

  1. What is the $submitted validation in AngularJS Forms?
    The $submitted validation verifies if the form in question has been submitted or not. It can hold a true or a false value. 
     
  2. How can the ngIf directive be used to validate form inputs?
    We can use the ngIf directive with submit buttons in AngularJS Forms. Given below is an example of the same. 
<button *ngIf='myVar.touched'>Submit</button>

Key Takeaways

This blog encapsulated the various essential and crucial concepts related to AngularJS Forms. Forms are a vital component of any website. Having read this blog, you now know how to implement AngularJS Forms and validate them fully. Good luck on your AngularJS journey!


Now that you have learned about forms in AngularJS continue your frontend development journey by following this link!

 

You can also explore other blogs related to web technologies here.

Previous article
AngularJS Events
Next article
AngularJS API
Guided path
Free
gridgp-icon
Basics of Javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass