Angular FormArray Example: Learn How to Implement Multiple Reactive Forms in Angular

Angular provides a powerful and flexible way of handling forms through its reactive forms module. With reactive forms, you can build complicated and dynamic forms that can handle a variety of input types, validation rules, and other advanced features.

One particularly useful feature of reactive forms is the FormArray, which allows you to manage a collection of form controls dynamically. In this article, we’ll walk you through how to create Angular FormArrays.

Understanding FormArray

A FormArray is essentially an array of FormControl or FormGroup objects that you can use to control multiple form inputs. You can use the FormArray to control individual form controls, such as checkboxes or text inputs, or to group related controls into logical units.

For example, you might use a FormArray to create a dynamic list of form inputs for a to-do list. With FormArray, you can add new items to the list, remove items, or update the state of individual items as needed.

The Benefits of Using FormArray

Using FormArray in Angular provides several key benefits, including:

– Dynamic control of form inputs: With FormArray, you can dynamically add, remove, or modify form controls based on user input or other data sources.
– Simplified code: Using FormArray allows you to write cleaner, more efficient code that is easier to maintain and update.
– Better user experience: Dynamic forms that use FormArray provide a better user experience than static forms by allowing users to manipulate the form data on the fly.

Creating an Angular FormArray Example

Let’s walk through an example of how to use Angular FormArray. In this example, we’ll create a simple form that allows users to add and remove email addresses.

1. Set up the component

The first step to creating a FormArray-based form is to set up the component. In this example, we’ll create a new component called “EmailListComponent” using the Angular CLI, as shown below.

“`
ng generate component EmailListComponent
“`

2. Define the FormArray

Next, we’ll define the FormArray that we’ll use to manage our email addresses. We’ll start by importing the necessary classes from the “@angular/forms” module.

“`
import { Component } from ‘@angular/core’;
import { FormGroup, FormControl, FormArray, FormBuilder, Validators } from ‘@angular/forms’;
“`

Then, we’ll create a new FormGroup object to hold our array of email addresses.

“`
export class EmailListComponent {
emailForm: FormGroup;

constructor(private formBuilder: FormBuilder) {
this.emailForm = this.formBuilder.group({
emailList: this.formBuilder.array([])
})
}
}
“`

Notice that we use the FormBuilder to create our FormGroup and FormArray objects. The FormBuilder simplifies the process of setting up complex reactive forms by reducing the amount of boilerplate code that you need to write.

3. Add the FormArray Control to the Template

Now that we’ve set up our email FormArray, we can add it to our template using the ngFor directive. Here’s an example:

“`



“`

Notice how we use the FormArrayName directive to bind our emailForm FormGroup to the template. We then use the ngFor loop to iterate over our emailForm.FormArray, displaying an input field for each email address.

We also use the formControlName directive to bind each input field to the corresponding FormControl inside the emailList FormArray.

Finally, we use a button to remove email addresses from the array. The removeEmail function is defined in the component class and is responsible for removing the specified email address from the array.

4. Add Functions to Manage our FormArray

We now need to define the functions that we’ll use to add and remove email addresses from our FormArray.

“`
export class EmailListComponent {
emailForm: FormGroup;

constructor(private formBuilder: FormBuilder) {
this.emailForm = this.formBuilder.group({
emailList: this.formBuilder.array([this.createEmailControl()])
})
}

createEmailControl(){
return this.formBuilder.control(null, [Validators.required, Validators.email]);
}

addEmail(){
const emailList = this.emailForm.get(’emailList’) as FormArray;
emailList.push(this.createEmailControl());
}

removeEmail(index: number){
const emailList = this.emailForm.get(’emailList’) as FormArray;
emailList.removeAt(index);
}
}
“`

We define two functions: createEmailControl and addEmail. The createEmailControl function is responsible for creating a new FormControl object that we’ll use to represent each email address. The function applies several validators to the control, ensuring that the email address is valid.

The addEmail function is responsible for adding a new email address to the FormArray. The function gets a reference to the emailList FormArray using the get method and then uses the FormArray push method to add a new FormControl to the list.

Finally, we define a function to remove email addresses from the array. This function works by getting a reference to the emailList FormArray using the get method and using the removeAt method to remove the specified email address from the array.

FAQs (Frequently Asked Questions)

Q1. What is the difference between Template-driven forms and Reactive forms in Angular?
A: Template-driven forms rely on directives within view templates to create and manage the form’s state, while reactive forms make use of imperative code that can be written directly in a component class.

Q2. What is FormArray in Angular?
A: FormArray is a class in the “@angular/forms” module that represents an array of form controls. You can use it to manipulate multiple form inputs dynamically.

Q3. What is FormBuilder?
A: FormBuilder is a class in the “@angular/forms” module that provides a set of convenient methods for creating reactive form objects.

Q4. What is Reactive Programming?
A: Reactive programming is a programming model that makes use of asynchronous data streams, allowing you to respond to changes in real-time. Angular’s reactive forms module leverages this concept to provide dynamic, responsive form handling.

In conclusion, Angular FormArray provides a powerful way to manage multiple reactive forms in Angular. With FormArray, you can build dynamic forms that can handle a variety of input types and validation rules. Hopefully, this article has helped you understand how to create and manage a FormArray-based form in Angular. If you have any questions or feedback, feel free to leave a comment below.

Similar Posts