I’m working on an Angular project where I need to create a dynamic form that allows users to add and remove input fields. These fields are part of a reactive form, and I want the user to be able to add multiple fields of the same type and also remove any of these fields dynamically.

What I Tried
I have created a reactive form using FormBuilder and added an array of form controls. I also used Angular’s FormArray to manage the collection of form controls. However, I’m facing issues with adding new fields and removing existing ones. The form either does not update correctly, or I encounter errors when trying to remove a field.

What I Expected to Happen
I expected that by clicking an “Add” button, a new input field would be appended to the form. Similarly, by clicking a “Remove” button next to each field, that specific field would be removed from the form. The form should update correctly to reflect the changes.