Mastering Angular Form Groups: Building Dynamic User Inputs

Angular's FormGroup is a powerful tool for managing complex forms, allowing you to group multiple form controls, track their validity, and react to changes. This challenge will test your understanding of FormGroup by having you build a dynamic registration form where fields can be conditionally added or removed.

Problem Description

Your task is to implement an Angular component that displays a user registration form. The form should allow users to input basic information (email, password) and optionally add additional fields like a username. The addition and removal of these optional fields should be dynamically managed using Angular's FormGroup and FormArray.

Key Requirements:

1. Base Form Controls: The form must include email and password as required form controls within a FormGroup.
2. Dynamic Field Addition: Implement a button that allows the user to add an optional username field to the form.
3. Dynamic Field Removal: Implement a way to remove the added username field. Each added username field should have its own removal button.
4. Form Structure: Utilize FormGroup to manage the overall form structure and FormArray to manage the collection of optional username fields.
5. Validation:
   • email should be a required field.
   • password should be a required field.
   • username should be an optional field, but if present, it should not be empty.
6. Submission: A submit button should be present. When clicked, the component should log the current form value to the console.

Expected Behavior:

• The form initially displays email and password fields.
• Clicking "Add Username" adds a username input field and a "Remove Username" button next to it.
• The user can add multiple username fields (though for simplicity, we'll focus on one initially, but the solution should be scalable).
• Clicking "Remove Username" removes the corresponding username input and its button.
• The form can be submitted, logging its data. Basic validation should prevent submission if required fields are empty.

Edge Cases:

• Attempting to submit the form with empty required fields.
• Adding and removing username fields multiple times.
• The impact of adding/removing fields on the overall form's validity.

Examples

Example 1: Initial Form State

• Input: User opens the registration form.
• Output: The form displays input fields for "Email" and "Password". A button labeled "Add Username" is visible.
• Explanation: This is the default state of the form before any dynamic fields are added.

Example 2: After Adding a Username

• Input: User clicks the "Add Username" button.
• Output: The form now displays "Email", "Password", and "Username" input fields. A "Remove Username" button is visible next to the username field.
• Explanation: The FormArray has been updated to include a new FormControl for the username, and the template reflects this change.

Example 3: After Removing a Username

• Input: User clicks the "Remove Username" button (after adding one).
• Output: The form reverts to displaying only "Email" and "Password" input fields. The "Add Username" button reappears.
• Explanation: The FormArray has been updated by removing the username FormControl, and the template reflects this change.

Constraints

• Angular version: Latest stable version (e.g., 16, 17).
• TypeScript version: Compatible with the Angular version.
• Use @angular/forms module exclusively for form management.
• No external form libraries are allowed.
• The solution should be a single Angular component.

Notes

• Consider how you will structure your FormGroup to accommodate a variable number of username fields. FormArray is the key here.
• Think about how to update the template dynamically to render the username fields based on the FormArray.
• The valueChanges observable on form controls or the form group itself can be useful for observing changes.
• Start by setting up the basic FormGroup with email and password, then tackle the dynamic FormArray integration.