Angular FormArray Example

The Angular FormArray example shows how to use the FormArray. The FormArray allows us to add controls dynamically to the reactive forms. In this example, we will take a very simple task of dynamically adding/removing skills to an employee form.

What is FormArray

The FormArray is a way to manage the collection of Form Controls in Angular. The controls can be a 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 an Array, it makes it easier dynamically add controls.

FormArray Example

Let us build a simple app, which allows us to add the new skill of a person dynamically.

Import FormArray

To use FormArray, First, you need to import the FormArray from the Angular Forms Module.

Build a Form Model

Build a form model skillsForm using the FormBuilder. Our Form has two fields. name of the person and his skills. Since the person can have more than one skill, we define skills as FormArray.

Next, a getter method skills, which returns the skills FormArray from the skillsForm

The skill FormGroup

We need to capture two fields under each skill. Name of the skill & years of exp. Hence we create a FormGroup with two fields. The method newSkill creates a new FormGroup and returns it. Note that we won’t be able to assign a name to Form Group.

Dynamically adding skill

Now, we need to add a new skill to the skills FormArray. Since it is an array we can use the push method to add the new skill using the the newSkill method. Note that newSkill() method returns a FormGroup. The name of the FormGroup is its Index in the FormArray.

Dynamically Removing Skill

Use the removeAt method to remove the element from the skills FromArray.

Submit

Template

Now, it is time to build the Template. Use the [formGroup]="skillsForm" to bind the form to the skillsForm model. The formControlName="name" directive binds the name input element to name property of the skillsForm

Binding FormArray to Template

We use the formArrayName directive to bind the skills form array to the div element. Now the div and anything inside the div element is bound to the skills form array.

Inside the div use ngFor to loop through each element of skills FormArray. let i=index will store the index value of the array in template local variable i. We will make use of it to remove the element from the skills array.

Each element under the skills is a FormGroup. We do not have a name to the FormGroup. The Index of the element is automatically assigned as the name for the element.

Hence we use the [formGroupName]="i" where i is the index of the FormArray to bind the FormGroup to the div element.

Finally, we add the controls using the formControlName directive.

Also, pass the index i to removeSkill

Finally, call the addSkills method to add new skills.

That’s it

Angular FormArray Example
Angular FormArray Example App Running

Source Code

app.component.ts

app.component.html

References

  1. FormArray
  2. FromArrayName

Summary

In this tutorial, we learned how to create a simple FormArray Example app.

Complete List of Articles on Angular Forms

  1. Angular Forms Tutorial: Fundamental & Concepts
  2. Template Driven Forms in Angular
  3. Set Value in Template Driven forms in Angular
  4. Reactive Forms in Angular
  5. FormBuilder in Reactive Forms
  6. SetValue & PatchValue in Angular
  7. StatusChanges in Angular Forms
  8. ValueChanges in Angular Forms
  9. FormControl
  10. FormGroup
  11. FormArray Example
  12. Build Dynamic or Nested Forms using FormArray
  13. Validations in Reactive Forms in Angular
  14. Custom Validator in Reactive Forms
  15. Passing Parameter to Custom Validator in Reactive Forms
  16. Inject Service into Custom Validator
  17. Validation in Template Driven Forms
  18. Custom Validator in Template Driven Forms

25 thoughts on “Angular FormArray Example”

  1. if some user wants to add functionality that when he filled detail and click on add button than it display and form reset and he add in same box new data

  2. So if I have a array of objects in the format {id: number, name: string, checked: boolean} and want to create a form of checkboxes, how to do it using the formArray? Is there way to insert a required validator to this form?

  3. How can you start with already one ( or more) skill(s) in the form?
    i tried to place the addSkills function inside the array but it doesn’t work

    this.skillsForm = this.fb.group({
    name: ”,
    skills: this.fb.array([
    this.addSkills()
    ]) ,
    });

    also put this formArray hardcode inside the formGrtoup doesn’t works
    [[ {
    “name”: “”,
    “skills”: [
    {
    “skill”: “”,
    “exp”: “”
    }
    ]
    } ]]

    1. You should add form group While hardcoding .
      this.skillForm = this.fb.group({
      name : ” ,
      skills : this.fb.array([this.fb.group({skill:’Angular’,exp : ‘2’ })])
      })

  4. error TS6234: This expression is not callable because it is a ‘get’ accessor. Did you mean to use it without ‘()’?
    Type ‘FormArray’ has no call signatures.

    11

    This is giving Error. Any suggestion?

  5. Terrific tutorial!
    I was struggling to create a form to add a printer from the set of all known printers in the system but this tutorial gave me the way.

    Thanks!

    1. *ngFor=”let skill of skills().controls; let i=index”
      needs to be
      *ngFor=”let skill of skills().controls; let i=index”

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top