Angular Reactive Form Control with Validation

This challenge focuses on building a reactive form control in Angular that handles user input, validation, and displays error messages. Creating robust and user-friendly forms is a fundamental skill in Angular development, and this exercise will solidify your understanding of reactive forms and validation techniques.

Problem Description

You are tasked with creating a reactive form control for an email address input field in an Angular component. The form control should:

1. Bind to an input field: The control should be bound to an <input> element in the template.
2. Validate email format: Implement validation to ensure the input is a valid email address using a regular expression.
3. Display validation errors: Display appropriate error messages to the user when the input is invalid. The error message should appear directly below the input field.
4. Track control status: The component should track the form control's status (e.g., Pending, Valid, Invalid, Disabled) and potentially display this status for debugging purposes.
5. Handle initial value: The form control should be initialized with a default email address (e.g., "test@example.com").

Expected Behavior:

• When the component loads, the input field should be populated with the initial email address.
• As the user types, the form control should update its value.
• If the user enters an invalid email address, an error message should be displayed immediately below the input field.
• If the user enters a valid email address, the error message should disappear.
• The component should clearly indicate the current status of the form control.

Examples

Example 1:

Input: User enters "invalid-email"
Output: Error message displayed below the input field: "Please enter a valid email address."
Explanation: The input does not match the email regular expression, triggering the validation error.

Example 2:

Input: User enters "test@example.com"
Output: No error message displayed below the input field.
Explanation: The input matches the email regular expression, so the validation passes.

Example 3:

Input: Component loads initially.
Output: Input field is populated with "test@example.com". No error message is displayed.
Explanation: The form control is initialized with a valid email address.

Constraints

• Angular Version: Use Angular version 14 or higher.
• Reactive Forms: The solution must use Angular's reactive forms approach (FormGroup, FormControl, Validators). Template-driven forms are not allowed.
• Regular Expression: Use a reasonable regular expression for email validation. A simple one is acceptable, but avoid overly complex expressions.
• Error Message: The error message should be clear and user-friendly.
• Performance: The validation should be performed efficiently as the user types (on input change). Avoid unnecessary computations.
• Component Structure: The solution should be encapsulated within a single Angular component.

Notes

• Consider using Angular's Validators service for validation.
• Utilize Angular's template syntax to bind the input field to the form control and display error messages.
• Think about how to handle the initial value of the form control.
• The component's template should be clean and readable.
• Focus on creating a well-structured and maintainable solution. Good coding practices are important.
• You can use any styling you prefer, but the focus is on the functionality and validation. No need for elaborate CSS.