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.
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:
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.
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.
<!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
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.
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.
116+ registered 