How To Create FormArray In Angular

Introduction

 
In this article, we will learn to create a new Angular 11 project using ng new command and then how to implement the form. After that we will create simple formArray example in visual studio code.
 
Step 1
 
Create an Angular project setup using the below commands or however you create your Angular app
 
ng new formarray
 
How To Create FormArray In Angular 
 
Step 2 - What is FormArray
 
The FormArray is a way to Manage collection of Form controls in Angular. The controls can be FormGroup, FormControl, or another FormArray.
 
We can group Form Controls in Angular forms in two ways.One is using the FormGroup and the other one is FormArray. The difference is how they implement it. In FormGroup controls becomes a property of the FormGroup. Each control is represented as key-value pair. While in FormArray, the controls become part of an array
 
Because it is implemented as Array, it makes it easier dynamically add controls.
 
Open a new terminal and run the following below commands
 
Step 3 - App.module.ts
  1. Import formModule:  
  2. import { FormsModule, ReactiveFormsModule } from '@angular/forms';  
Now we will declare form in app.module.ts,
  1. import { NgModule } from '@angular/core';  
  2. import { BrowserModule } from '@angular/platform-browser';  
  3. import { FormsModule, ReactiveFormsModule } from '@angular/forms';  
  4. import { AppComponent } from './app.component';  
  5. @NgModule({  
  6.   imports:      [ BrowserModule, FormsModule, ReactiveFormsModule ],  
  7.   declarations: [ AppComponent ],  
  8.   bootstrap:    [ AppComponent ]  
  9. })  
  10. export class AppModule { }   
Step 4
 
Now, we will write integration on App.component.html
  1. <p>  
  2.   Start editing to see some magic happen :)  
  3. </p>  
  4. <div [formGroup]="orderForm">  
  5. <div formArrayName="items"  
  6.   *ngFor="let item of orderForm.get('items').controls; let i = index;">  
  7.   <div [formGroupName]="i">  
  8.     <input formControlName="name" placeholder="Item name">  
  9.     <input formControlName="description" placeholder="Item description">  
  10.     <input formControlName="price" placeholder="Item price">  
  11.   </div>  
  12. </div>  
  13. </div>  
  14. <button (click)="addItem()">Add</button>   
Step 5 - Import FormArray
 
First, we need to import the FormArray from the Angular Forms Module.
  1. import { FormGroup, FormControl,FormArray, FormBuilder } from '@angular/forms'  
Build a Form Group
 
Build a formGroup orderForm using the FormBuilder. We define items as FormArray.
 
Items FormGroup
 
We need to capture two fields under each item, the name of the item & description and price. Hence we create a FormGroup with three fields. The method createItem creates a new FormGroup and returns it.
 
Next, we can open the app.component.ts and write some code.
  1. import { Component, OnInit } from '@angular/core';  
  2. import { FormBuilder, FormGroup, FormArray, FormControl, Validators } from '@angular/forms';  
  3. @Component({  
  4.   selector: 'app-root',  
  5.   templateUrl: './app.component.html',  
  6.   styleUrls: ['./app.component.scss']  
  7. })  
  8. export class AppComponent implements OnInit  {  
  9.   title = 'formarray';  
  10.   orderForm!: FormGroup;  
  11.   items!: FormArray;  
  12.   constructor(private formBuilder: FormBuilder) {}   
  13.   ngOnInit() {  
  14.     this.orderForm = new FormGroup({  
  15.       items: new FormArray([])  
  16.     });  
  17.   }   
  18.   createItem(): FormGroup {  
  19.     return this.formBuilder.group({  
  20.       name: '',  
  21.       description: '',  
  22.       price: ''  
  23.     });  
  24.   }   
  25.   addItem(): void {  
  26.     this.items = this.orderForm.get('items') as FormArray;  
  27.     this.items.push(this.createItem());  
  28.   }  
  29. }   
Step 6
 
Now we will run the application
 
ng serve --port 1223
 
How To Create FormArray In Angular
 
On successful execution of the above command, it will show the browser,
How To Create FormArray In Angular 
How To Create FormArray In Angular

Recommended Ebook

Crack Your Angular Interview

Download Now!
Similar Articles