What are forms in AngularJS?

Key takeaways:
AngularJS enhances basic HTML forms by providing powerful features such as two-way data binding, form validation, and easy controller integration.
Template-driven forms are easier to set up and ideal for simpler scenarios. The form logic is primarily defined in the HTML template.
Reactive forms are more scalable and flexible, best for complex use cases where the component handles validation logic programmatically.
AngularJS offers several directives, such as ng-model, ng-submit, ng-repeat, and ng-required, to build dynamic and responsive forms with minimal effort. These directives simplify form handling and validation.
AngularJS supports various form elements such as checkboxes, radio buttons, and select boxes, enabling the creation of forms with multiple options for user input.
AngularJS provides built-in validation with directives such as ng-required, ng-minlength, ng-maxlength, and ng-pattern.

Introduction to AngularJS forms

Forms are an essential part of web applications. They act as the primary way to gather user input. AngularJS forms provide an efficient way to create interactive and user-friendly web forms. They offer features like two-way data binding, form validation, and easy controller integration, making form handling efficient and straightforward.

Types of forms in AngularJS

AngularJS supports two types of forms. Let’s discuss them below.

Template-driven forms: Most of the logic is already defined in the HTML template. They are easier to set up and suitable for simple scenarios.
Reactive forms: In reactive forms, the form structure is defined in the component class using a reactive programming approach. They are more flexible, scalable, and better for complex scenarios. We can apply validation using JavaScript code.

Form controls and directives

Directives in AngularJS extend the functionality of DOM elements. They act as markers that change the behavior of HTML tags, CSS classes, and more. These directives make building dynamic applications simpler and more efficient. Let’s go over some key directives used in AngularJS forms:

ng-app: It defines the root element of the application and initializes the app when the page is loaded. It renders only those DOM elements contained within the root. Only one ng-app directive is allowed in the HTML file. All other instances will be overridden by the first one.
ng-controller: It is responsible for adding a controller to manage the application’s business logic.
ng-submit or ngSubmit: It defines the action on a form submission. Typically, it triggers a function that processes the form data.
ng-model or ngModel: It binds input fields to the application’s model, enabling two-way data binding. This keeps the form and the model in sync.
ng-repeat: It implements the loop functionality to allow the generation of the content by iterating over arrays or objects.
ngForm: It acts as a container for form elements. The ngForm directive groups multiple input fields and allows form-level validation.
ng-required or ngRequired: It marks an input field as mandatory. The form will be considered invalid unless the required field contains a value when applied.
ng-disabled or ngDisabled: It turns on or off form inputs based on the condition provided. If the condition evaluates to true, the input field will be disabled.
ng-change or ngChange: It executes the specified function whenever the value of the associated input field changes. This allows for real-time reactions to user input, such as validating input or triggering other actions.

Each of these directives enhances the flexibility and functionality of forms. They enable us to create dynamic, responsive, and user-friendly applications.

Form elements in AngularJS

AngularJS provides support for various form elements. Let’s learn how to implement checkboxes, radio buttons, and select boxes:

Checkboxes in AngularJS

Checkboxes are useful for multiple-choice selections. In AngularJS, we can bind them to boolean values or arrays. Here is the way to add checkboxes to the AngularJS applications:

We use the ng-repeat directive on hobbies to iterate over each item. It’ll generate a separate <label> element for each hobby. Each checkbox is specific to an individual hobby. We bind the checkbox’s checked state to user.selectedHobbies[hobby], where hobby is the name of the current hobby in the iteration. Suppose a user checks the checkbox for a specific hobby, the corresponding property in the user.selectedHobbies object becomes true. If the checkbox is unchecked, the value becomes false or undefined.

Radio buttons in AngularJS

Radio buttons are ideal for single-choice selections from a group of options. We can add it to the application by the following method:

In the above code, we define two radio buttons that allow the user to select one option. In this case, the user can choose between “Male” and “Female.” We use the ng-model directive to bind the radio button’s value to the user.gender property. Whatever the user selects (either “Male” or “Female”), AngularJS will update the user.gender property accordingly (to the value of either male or female.)

Select boxes in AngularJS

Select boxes (drop-downs) allow us to choose from a list of options. Here is a way to add a checkbox to the application:

In the above code, we added a drop-down element to select one option from a list of countries.

Line 1: We bind the selected option to the user.country model using ng-model directive.
Line 2: We add “Select a country” as the first option in the dropdown list, giving the user a default placeholder text. The value is set to an empty string (""), so if the user does not select any country, user.country will remain empty.
Lines 3–5: We use the ng-repeat directive to iterate over the countries array and create an <option> for each country object in the array. We set the value of the option to the code property of each country object. Lastly, the {{country.name}} outputs the name of the country as the display text of the option.

Here is how we can add a dropdown with multiple selection options using the ng-repeat directive:

In the above code, we added a drop-down element that allows users to select multiple options from a list of fruits using the multiple attribute. We bind the selected fruits to the user.selectedFruits model using the ng-model directive. Since multiple options can be selected, the user.selectedFruits will be an array that holds the selected values. We use the ng-repeat directive to iterate over the fruits array and create an <option> for each fruit in the array. We set the value of the option to the name of the fruit. For example, if fruit is "Apple", the value of the option will be "Apple". When the user selects one or more fruits, the user.selectedFruits array is updated to hold the selected values (e.g., ["Apple", "Banana"]).

Example of a form in AngularJS

Let’s integrate all the components we’ve covered to demonstrate the use of various AngularJS form directives including checkboxes, radio buttons, multiselect drop-down, and dynamic data binding.

Best practices and tips

Following the best practices can improve the maintainability and usability of the application. Consider the following tips:

Use ng-model consistently for two-way data binding.
Implement client-side validation for better user experience.
Handle form submission errors gracefully.
Consider using reactive forms for complex scenarios.
Group-related checkboxes and radio buttons for better organization.
Provide clear labels and instructions for form elements.

Conclusion

AngularJS forms provide a powerful and flexible way to handle user input in web applications. We can create user-friendly forms by utilizing features like built-in directives for two-way data binding, validation, and easy integration with controllers. Whether we’re working with text inputs, checkboxes, radio buttons, or select boxes, AngularJS offers the tools needed to build efficient and interactive web forms.