Reactive FormArray Example in Angular

In this article, I’d like to showcase the process to create and apply validations in FormArray

What’s a FormArray
A FormArray is responsible for managing a collection of AbstractControl, which can be a FormGroup, a FormControl, or another FormArray. FormArray is one of the three fundamental building blocks used to define forms in Angular, along with FormControl and FormGroup.

Note: for dropdown i have used Angular Syncfusion. please install its package and import the package. you can use any other package also

• let Further see the steps to create a form array

a. Import FormsModule and ReactiveFormsModule in your app.module.ts file.

b. Now in the component file add FormGroup variable like

addMemberItemInputForm = {} as FormGroup;

c. call FormBuilder in the constructor like

private formBuilder: FormBuilder

d. Now initialise form controls by calling it in a function or the constructor like i have used a function called createAddMemberItemInputForm. add the required validations to the controls. here itemDetails is declared a form Array in the below code and i have added a common Validation for form array in which only 5 rows can be added. you can remove or change it.

createAddMemberItemInputForm(){
  this.addMemberItemInputForm = this.formBuilder.group({
     memberName: ['', Validators.required],
     itemType: ['', Validators.required],
     itemDetails: this.formBuilder.array(
    [this.createEmpFormGroup()],
    [Validators.required, Validators.maxLength(5)])
   });
 }

e. Now i will use getter to binds an object property to a function in the createAddMemberItemInputForm() memberName object property is bind to a function called get memberName()

 get memberName() {
    return this.addMemberItemInputForm.get('memberName');
 }

f. Like this for every control create a getter function.

g. Now in the form array there is a function called this.createEmpFormGroup() that is used to initialise the controls in form array like the code bellow

createEmpFormGroup(){
   return this.formBuilder.group({
     itemName: ['', [Validators.required]],
     quantity: ['', [Validators.required, Validators.max(5)]],
     price: ['', [Validators.required]]
   })
 }

h. Now create a add and delete row for form array controls like

addEmployee() {
  let newMem = this.createEmpFormGroup();
  this.itemDetails.push(newMem);
}

deleteEmployee(i: number) {
  this.itemDetails.removeAt(i);
}

i. Coming to the HTML side add the formGroup and formControlName

j. For outer form control add

<div class="col-6">
   <label class="form-label">Enter Member Name</label>
   <input type="text" class="form-control" placeholder="Member Name" formControlName="memberName">
  <label *ngIf="memberName?.invalid && isValidFormSubmitted != null && !isValidFormSubmitted" class="error">
   Team name is required.
  </label>
</div>

k. For form Array add

<tbody formArrayName="itemDetails">
  <tr  *ngFor="let item of itemDetails.controls; let i = index" [formGroupName]="i">
   <td>
    <input type="text" class="form-control" placeholder="Enter Item Name" formControlName="itemName">
    <label *ngIf="itemDetails.controls[i].get('itemName')?.errors?.['required'] && isValidFormSubmitted != null && !isValidFormSubmitted" class="error">
     Employee name required.
  </label>
 </td>
<td>

l. Now reaching this step you have almost implemented form array with proper validations.

m. Entire code with live preview is on Github you can refer it.

Code available on GitHub:- [(https://github.com/justinthadathil/AngularFormArray]

Live preview on - [(https://justinthadathil.github.io/Angular_Form_Array/]