How to Handle Dynamic Form fields in Reactive forms in Angular
Tags: angular, web, frontend, tutorial
Published: 2023-07-16 11:06:58

In this article, I will explore the process of handling dynamic forms in the Angular framework using Reactive Forms. Dynamic forms allow us to dynamically generate form fields based on user input or other conditions. By leveraging the power of Reactive Forms, we can easily handle dynamic form interactions in Angular. Let's dive into the step-by-step process of creating and managing dynamic forms in Angular.

## **Reactive Forms**

First we will explain what is reactive form in angular,
Reactive forms are build around observable streams, where form inputs and values are provided as streams of input values, which can be accessed synchronously.In Angular their have two type of forms ,

1. Template-driven forms

2. Reactive Forms

Related to above form type the suitable to create dynamic form from Reactive forms, Lets started with building simple sample application.

## **Scenario**

**Step-01 : Setting up the Angular project**

First, Let's create a new Angular project using the Angular CLI.
Open your command prompt(terminal) and run the following command.

```
ng new dynamic-forms-demo
```

**Step-02 : Create the new component**

Create a new component for the dynamic form

```
ng generate component dynamic-form
```
another way

```
ng g c dynamic-form
```
Now you will create a component name call **dynamic-form** under the "src" folder


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfy1vcn25834yv2bc7ij.png)

**Step 3: Import the Required Modules**

In order to work with Reactive Forms, we need to import the **ReactiveFormsModule** from **@angular/forms** module. Open the **app.module.ts** file in your project and add the following import statement:

```
import { ReactiveFormsModule } from '@angular/forms';
```
Then include the **ReactiveFormsModule** to the imports sections

```
@NgModule({
  declarations: [
    // Other declarations
  ],
  imports: [
    // Other imports
    ReactiveFormsModule
  ],
  providers: [
    // Other providers
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```
**Step 4: Set Up the Reactive Form**

> doing inside of the dynamic-form.component.ts

Import the **FormArray, FormBuilder, FormGroup** to the dynamic-form component

```
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
```
Then,inside the class define the **dynamicFormGroup**

```
export class DynamicFormComponent implements OnInit {

  dynamicFormGroup!: FormGroup;  //defined the dynamicFormGroup

  constructor() { }

  ngOnInit() {

  }

}
```

In the component's constructor, initialize the form group and form array

```
export class DynamicFormComponent implements OnInit {

  dynamicFormGroup!: FormGroup;

  constructor(private formBuilder : FormBuilder) { }

  ngOnInit() {
    this.dynamicFormGroup = this.formBuilder.group({
          Address: new FormArray([])
    });
  }
}
```
Then create the dynamic fields for the **Address** 

```
get createItem(): FormGroup {
    return this.formBuilder.group({
      streetAddress: [],
      city:[],
      state:[]
    })
  }
```
Now we need to add the **createItem** method fields for the Address group, The **createItem** method creates a new instance of the **FormGroup** for the Address group, with the corresponding form control fields (streetAddress, city, state,) and their initial values set to an empty string.

```
 ngOnInit() {
    this.dynamicFormGroup = this.formBuilder.group({
      Address: new FormArray([this.createItem]),
    });
  }
```

**Step 5: Build the Dynamic Form Template**

Now, let's construct the template for our dynamic form in the _dynamic-form.component.html_ file.

```
 <div>
    <form [formGroup]="dynamicFormGroup" (ngSubmit)="onSubmit()">
        <div class="form-row" *ngFor="let fields of AddressInfo.controls; let i = index" >
            <div class="form-group col-md-3" >
                <label for="password"><b>Street Address</b></label>
                <input type="text" class="form-control" placeholder="Street Address" name="SA" formControlName="streetAddress" />
              </div>
              <div class="form-group col-md-3" >
                <label for="password"><b>City</b></label>
                <input type="text" class="form-control" placeholder="City" name="city" formControlName="city" />
              </div>
              <div class="form-group col-md-3" >
                <label for="password"><b>State</b></label>
                <input type="text" class="form-control" placeholder="State" name="state" formControlName="state" />
              </div>
        </div>
        <br/>
     <button type="submit"  class="btn btn-primary">Submit</button>
    </form>
    <br/>
    <button type = "button" class="btn btn-primary" (click)="addNewAddress()" >Add New Address</button>
</div>    

<h4>OUTPUT</h4>
<div>{{output}}</div>
```
**Step 7: Display and Interact with the Dynamic Form**

In the template, add a button to trigger the addition of form fields dynamically:

```
<button type = "button" class="btn btn-primary" (click)="addNewAddress()" >Add New Address</button>
```
Additionally, you can bind the form array's controls to display the dynamic form fields

```
<div class="form-row" *ngFor="let fields of AddressInfo.controls; let i = index" >
<!-- Display form fields dynamically -->
</div>
```
**Step 8: Handle Form Submission**

To handle the form submission, create a method in the component:

```
onSubmit() {
//logic implementation
this.output = this.dynamicFormGroup.controls['address'].value;
    console.log(this.output);
}
```

> Conclusion:
> By following these step-by-step instructions, you have learned how to create dynamic forms in Angular using Reactive Forms. Leveraging the power of Reactive Forms and Angular's capabilities, you can now handle and manage dynamic forms seamlessly. This knowledge opens up new possibilities for building interactive and user-friendly applications in Angular. Happy coding!
Here is the Example Solution :[Angular Dynamic Forms handling reactive forms](https://codesandbox.io/p/sandbox/hardcore-goldberg-ytsxn5?file=%2Fsrc%2Fapp%2Fdynamic-form%2Fdynamic-form.component.ts%3A35%2C16)

**That’s It!**
Of course you probably want to see this in action. Here’s a working demo for you to fork or play with:

{% codesandbox hardcore-goldberg-ytsxn5%}


**Thanks for reading the whole story ❤**

PC : https://morioh.com/p/3cbcfff8086a