Reactive FormArray Example in Angular
Tags: beginners, angularformarray, formarray, angular
Published: 2022-03-26 07:39:47

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/]