Reactive Forms – How to Add Form Fields Dynamically – Angular 16

Are you looking to add form fields dynamically in Reactive Forms of Angular 16? Reactive forms are incredibly useful as they come with built-in features such as form field validation and handling field behavior. However, in certain cases, you may need to add form fields dynamically. For instance, you might require a functionality where a user can click a button and add a new form field to an existing form.

To add new fields to an existing form dynamically, follow these simple steps:

Step 1: Installation and Setting Up Your Angular Application

Before you begin, ensure that you have installed and set up your Angular application. Open your terminal and execute the following commands:

npm install -g @angular/cli@latest

This command installs the latest version of Angular CLI on your system. Next, create a folder in any drive and navigate to it in your terminal. Finally, use the following command to create a new Angular application:

ng new {YourAppName}

This command generates a new Angular application in your system. To run the application, execute the following command:

ng serve

Step 2: Reactive Forms Package Installation

Next, open the app.module.ts file (or the relevant feature module where you want to create the form) and import the ReactiveFormsModule package. Save the file and restart your application.

Step 3: Adding Form Fields Dynamically

Adding fields dynamically can serve various purposes. Here, we will demonstrate how to create multiple address fields dynamically in a form. When a user clicks a button, they can add more address fields dynamically.

First, open your component file and inject the Reactive Form Builder as shown below:

import { FormBuilder, FormControl, FormGroup } from '@angular/forms';

constructor(private fb: FormBuilder) { }

Next, create a variable with any name and initialize it as a form group using the FormBuilder:

MyForm: FormGroup;

constructor(private fb: FormBuilder) {
  this.MyForm = this.fb.group({
    address_array: this.fb.array([])
  });
}

In the above code, we define the MyForm variable as a form group with the address_array key as a form array.

   MyForm = this.fb.group({
    address_array : this.fb.array([])
   });

Step 4: Implementing Reactive Forms Group in HTML

In your HTML file, use the following code to implement the reactive forms group:

    <h1>My Form</h1>
<form [formGroup]="MyForm">
  <div formArrayName="address_array">
    <section *ngFor="let control of MyForm.controls.address_array.controls; let i = index;">
      <textarea [formControlName]="i"></textarea>
    </section>
  </div>
  <div>
    <button (click)="addAddressField()">Add Address Field</button>
  </div>
</form>

In this example, we use a <textarea> element, but you can use any form element in a similar manner, such as input fields, checkboxes, radio buttons, etc.

Brief Explanation of the HTML Code:

Inside the form tag, we define the [formGroup] attribute and set it to "MyForm". Then, we define the formArrayName attribute on the enclosing div tag. Inside the div with formArrayName, we use *ngFor to automatically render all the dynamically added fields.

Below the form, we add a button that triggers the addAddressField() function when clicked:

addAddressField() {
  this.MyForm.controls.address_array.push(new FormControl());
}

When the user clicks the “Add Address Field” button, it appends multiple text areas below each other.

By following these steps, you can easily add form fields dynamically in Reactive Forms of Angular 16. This technique opens up a range of possibilities for enhancing your form-building capabilities.

Once you submit form, then you will get values as shown below

{
   address_array: ["Address1","Address 2", "Address 3"]
}

For more tutorials request click here

For Latest Angular Documents, visit here