Dynamic Form Array in Angular

This challenge focuses on building a dynamic form array in Angular. Dynamic forms are essential when the number of form controls needed isn't known beforehand, allowing for flexible and adaptable user interfaces. You'll be creating a component that allows users to add and remove form controls within an array, demonstrating a core Angular forms concept.

Problem Description

You are tasked with creating an Angular component that displays a form with a dynamic array of input fields. The component should initially render with a predefined number of input fields (e.g., 2). The user should be able to:

Add a new input field: A button should be provided to add a new input field to the array. When clicked, a new, empty input field should be dynamically added to the form.
Remove an existing input field: Each input field should have a "Remove" button. Clicking this button should remove the corresponding input field from the array and update the form accordingly.
Validate Input Fields: Each input field should be required. The form should not be valid until all input fields have a value.
Display Form Validity: A message should be displayed indicating whether the form is valid or invalid.

Key Requirements:

Use Angular's FormGroup, FormArray, and FormControl to manage the form.
Implement the add and remove functionality using Angular's reactive forms approach.
Ensure the form updates dynamically as input fields are added or removed.
Implement the required validation for each input field.
Provide clear visual feedback to the user regarding form validity.

Expected Behavior:

The component should render with the initial number of input fields.
Clicking "Add" should add a new, empty input field.
Clicking "Remove" next to an input field should remove it.
The form validity message should accurately reflect the validity of all input fields.
The form should only be considered valid when all input fields have a value.

Edge Cases to Consider:

What happens when the array is empty? (Consider displaying a message or disabling the "Add" button).
Handle potential errors gracefully (e.g., if there's an issue adding or removing controls).

Examples

Example 1:

Initial State: Form with 2 input fields. Both fields are empty. Form validity message: "Form is invalid."
User Action: User enters a value into the first field.
Output: Form validity message: "Form is invalid."
Explanation: Only one field has a value, so the form is still invalid.

Example 2:

State: Form with 3 input fields. The first two fields have values, the third is empty. Form validity message: "Form is invalid."
User Action: User clicks the "Add" button.
Output: Form now has 4 input fields. All fields are empty. Form validity message: "Form is invalid."
Explanation: Adding a new field resets the validity to invalid.

Example 3:

State: Form with 2 input fields. Both fields have values. Form validity message: "Form is valid."
User Action: User clicks the "Remove" button next to the first field.
Output: Form now has 1 input field. The field has the value previously entered. Form validity message: "Form is invalid."
Explanation: Removing a field makes the form invalid.

Constraints

The initial number of input fields should be 2.
The input fields should be of type text.
The component should be implemented using Angular's reactive forms.
The form should be displayed within a single div element.
Performance should be considered; avoid unnecessary re-renders when adding or removing fields. (Using trackBy in the *ngFor loop is recommended).

Notes

Consider using trackBy in your *ngFor loop to optimize rendering performance when adding or removing form controls. This helps Angular identify which items have changed.
Think about how to handle the case where the form array becomes empty.
Focus on creating a clean and maintainable component structure.
Remember to import necessary Angular modules (e.g., ReactiveFormsModule).
The component should be self-contained and demonstrate the core concepts of dynamic form arrays.