DEV Community

Cover image for Reactive FormArray Example in Angular
Justin Thadathil
Justin Thadathil

Posted on • Edited on

Reactive FormArray Example in Angular

#beginners #angularformarray #formarray #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;
Enter fullscreen mode Exit fullscreen mode

c. call FormBuilder in the constructor like

private formBuilder: FormBuilder
Enter fullscreen mode Exit fullscreen mode

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)]) }); }
Enter fullscreen mode Exit fullscreen mode

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'); }
Enter fullscreen mode Exit fullscreen mode

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]] }) }
Enter fullscreen mode Exit fullscreen mode

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); }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)