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

 

 

 

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

Import formModule:
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

Now we will declare form in app.module.ts,

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
  imports:      [ BrowserModule, FormsModule, ReactiveFormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Step 4

 

Now, we will write integration on App.component.html

<p>
  Start editing to see some magic happen :)
</p>
<div [formGroup]="orderForm">
<div formArrayName="items"
  *ngFor="let item of orderForm.get('items').controls; let i = index;">
  <div [formGroupName]="i">
    <input formControlName="name" placeholder="Item name">
    <input formControlName="description" placeholder="Item description">
    <input formControlName="price" placeholder="Item price">
  </div>
</div>
</div>
<button (click)="addItem()">Add</button>

Step 5 - Import FormArray

 

First, we need to import the FormArray from the Angular Forms Module.

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.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl, Validators } from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit  {
  title = 'formarray';
  orderForm!: FormGroup;
  items!: FormArray;
  constructor(private formBuilder: FormBuilder) {}
  ngOnInit() {
    this.orderForm = new FormGroup({
      items: new FormArray([])
    });
  }
  createItem(): FormGroup {
    return this.formBuilder.group({
      name: '',
      description: '',
      price: ''
    });
  }
  addItem(): void {
    this.items = this.orderForm.get('items') as FormArray;
    this.items.push(this.createItem());
  }
}

Step 6

 

Now we will run the application

 

ng serve --port 1223

 

 

On successful execution of the above command, it will show the browser,