FormArray for dynamic fields in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a FormArray in Angular?

A FormArray is a way to manage an array of form controls or groups dynamically. It lets you add or remove controls at runtime, useful for forms with variable numbers of inputs.

beginner

How do you add a new control to a FormArray?

You use the push() method on the FormArray instance, passing a new FormControl or FormGroup.

intermediate

Why use FormArray instead of multiple FormControls?

Because FormArray groups controls in a list that can grow or shrink dynamically, making it easier to manage forms with repeating fields like multiple phone numbers or addresses.

beginner

How do you remove a control from a FormArray?

Use the removeAt(index) method, where index is the position of the control you want to remove.

intermediate

What is the role of FormBuilder with FormArray?

FormBuilder helps create FormArray and its controls more easily with less code, improving readability and maintainability.

Which method adds a new control to a FormArray?

A add()

B insert()

C append()

D push()

The push() method adds a new control to the end of a FormArray.

How do you remove the third control from a FormArray?

A delete(2)

B remove(3)

C removeAt(2)

D pop()

Controls are zero-indexed, so the third control is at index 2. Use removeAt(2) to remove it.

What type of object can a FormArray hold?

A FormControl or FormGroup

B Only FormGroup

C Only FormControl

D Only primitive values

FormArray can hold both FormControl and FormGroup instances.

Which Angular service helps create FormArray easily?

A Renderer2

B FormBuilder

C Router

D HttpClient

FormBuilder is the service designed to simplify creating form controls and arrays.

What is a common use case for FormArray?

A Dynamic lists of inputs like multiple emails

B Static single input forms

C Routing configuration

D Styling components

FormArray is ideal for dynamic lists of inputs such as multiple email addresses or phone numbers.

Explain how to create a dynamic form with multiple input fields using FormArray in Angular.

Think about how you would add or remove items like a list of phone numbers.

Describe the benefits of using FormArray over individual FormControls for dynamic forms.

Consider a form where the number of inputs changes based on user actions.