FormArray over FormGroup in Angular

What's an Angular FormArray?

In Angular Reactive Forms, every form has a form model defined programmatically using the FormControl and FormGroup APIs, or alternately using the further terse FormBuilder API,

In utmost cases, all the form fields of a form are well-known outspoken so we can define a static model for a form using a FormGroup, for exp
form = this.fb.group({
title: ['', { validators: [ Validators.required, Validators.minLength(5), Validators.maxLength(60) ], asyncValidators: [subTitleValidator(this.subtitles)], updateOn: 'blur'}],
updatedAt: [new Date(), Validators.required],
category: [' ', Validators.required],
downloadsAllowed: [false, Validators.requiredTrue],
longDescription: ['', [Validators.required, Validators.minLength(3)]]}); 

As we can see, using FormGroup, we can define a group of affiliated form controls, their original values, and form confirmation rules, and give property names for each field of the form.

This is possible because this is a static form with a pre-defined number of fields that are each known outspoken, which is the most common case when it comes to forms.
But what about other more advanced but still constantly encountered situations where the form is much more dynamic, and where not all form fields are known outspoken?

Imagine a dynamic form where form controls are added or removed to the form by the stoner, depending on its commerce with the UI, an illustration would be a form that's completely stoutly erected according to data coming from the backend, another further common illustration of a dynamic form would be an in-place editable table, where the stoner can add or remove lines containing multiple editable form controls to the form by using the Add and cancel buttons.
Each time that the stoner clicks on the Add button, a row will be added to the form containing two new form controls.

We can apply this illustration using FormArray but the main question is, why can not this form be enforced using FormGroup?

What's the difference between a FormArray and a FormGroup?

Unlike our original illustration where we defined the form model using FormGroup via a call to the fb.group() API, in the case of an in-place editable table, we do not know the number of form controls outspoken and this is because we can not know outspoken the number of rows that the table will have, the stoner might add an unknown number of rows using the add button, and he might indeed remove them midway through by using the delete button.

It wouldn't be appropriate to define a form model using FormGroup, without comprehending the actual numeral of rows. Also, it would be hard to give to the fields-defined names but we can define a form model for this in-place editable table using a FormArray rather.
A FormArray, just like a FormGroup, is also a form control vessel, that summations the values and validity state of its child factors but unlike a FormGroup, a FormArray vessel doesn't endure us to comprehend all the management up front, as well as their characters.

Actually, a FormArray can have an undetermined number of form controls, starting at zero, the controls can also be stoutly added and removed depending on how the stoner interacts with the UI, and each control will also have a numeric position in the form controls array, rather of a unique name.
Form controls can be added or deducted from the model anytime at runtime using the FormArray API.

These are the most generally used styles available in the FormArray API

controls: This is an array including all the commands that are the domain of the array
length: This is the entire size of the array
at( indicator):  Returns the form control at a given array position
drive( control): Adds a new control to the end of the array
removeAt( indicator): Removes a control at a given position of the array
getRawValue():  Gets the values of all state commands, via the control.value property of each command

When to utilize an Angular FormArray vs a FormGroup?

When erecting the model of an Angular form, utmost of the time we want to use a FormGroup and not a FormArray, so that should be the dereliction choice. As we can see, the FormArray vessel is ideal for those rarer situations when we do not know the number of form controls outspoken or their names. The FormArray vessel is ideal for further dynamic situations where the content of the form is, in general, defined at runtime, depending on stoner commerce or indeed backend data else FormGroup is better as a dereliction choice.