How to create FormArray In Angular | Reactive Form

FormArray

It is a class that tracks the value and validity state of array of FormControl, FormGroup and FormArray instances. A FormArray aggregates the values of each child FormControl into an array.

Form arrays allow you to create new form controls dynamically.

 setValue() and patchValue() are also the methods of FormArray class.

setValue(): Sets the value of the FormArray. We need to pass an array that must match the structure of the control. If our array does not match the structure of the control, setValue() will throw error.

patchValue(): Patches the value of FormArray. We need to pass an array that should match the structure of the control. If the array that we pass, does not match the structure of the control completely, then patchValue() will patch only those fields which are matching with the structure of the control and rest will be as it is.

Subject and Behavior Subject in Angular 13 | Subject | Angular 13 Tutorial in Hindi

App.component.html

<div class="container">
<h2>Form Array Example Add dynamic field</h2>
<form [formGroup]="reactform" (ngSubmit)="sendata(reactform)">
  <div class="form-group">
  <label>Name</label>
  <input type="text" name="name" formControlName="fname" class="form-control"/>
</div>
<div class="form-group">
  <label>Email</label>
  <input type="text" name="email" formControlName="email" class="form-control"/>
</div>

<div class="form-group" formArrayName="mores">
  <label>Field</label>
  <ng-container *ngFor="let more of reactform.get('mores').controls; index as i">
  <input type="text" class="form-control mt-2" formControlName="{{i}}"/>
</ng-container>
  <br/>
  <a href="#" (click)="addmore()">Add More Field</a>
</div>

<br/>
  <button class="btn btn-primary" type="submit">Submit</button>

</form>
</div>

App.component.ts

npm Package @angular/forms

Module import { FormArray } from ‘@angular/forms’;

import { Component } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'formexmp';
  reactform:FormGroup|any;
   ngOnInit(){
    this.reactform = new FormGroup({
      'fname' : new FormControl(null, Validators.required),
      'email' : new FormControl(null),
      'mores' : new FormArray([
        new FormControl(null)
      ])
      
   })
   }

   sendata(reactform:FormGroup){
     console.log(this.reactform.value);
   }

   addmore(){
    this.reactform.get('mores').push(new FormControl(null))
   }
   

}

What is the Architecture Overview of Angular ?

Nested FormArray

Nested form arrays can come in handy when you have a group of form controls but you’re not sure how many there will be.

Form arrays allow you to create new form controls dynamically.

Access the array: You can access the associated FormArray using the get method on the parent FormGroup

Ex: this.form.get(‘mores’).

Get the value: the value property is always synced and available on the FormArray.

Set the value: You can set an initial value for each child control when instantiating the FormArray, or you can set the value programmatically later using the FormArray’s setValue or patchValue methods.

Listen to value: If you want to listen to changes in the value of the array, you can subscribe to the FormArray’s valueChanges event. You can also listen to its statusChanges event to be notified when the validation status is re-calculated.

Add new controls: You can add new controls to the FormArray dynamically by calling its push method

Ex: this.form.get(‘mores’).push(new FormControl());

If you have any problem to understand this article so please watch video tutorial also