Angular Async Email Availability Validator

Building robust forms in Angular often requires validating user input in real-time. Sometimes, validation logic needs to communicate with external services (like checking if an email address is already registered). This challenge focuses on implementing an asynchronous validator in Angular to check for the availability of an email address against a simulated backend.

Problem Description

Your task is to create an Angular asynchronous validator that checks if a given email address is already taken. This validator should be integrated into an Angular Reactive Form. The validation process will involve simulating a network request to a backend service.

Key Requirements:

• Angular Reactive Forms: The validator must be implemented within the Angular Reactive Forms framework.
• Async Validator Interface: Implement the AsyncValidator interface from @angular/forms.
• Simulated Backend: Create a simple service that simulates checking email availability. This service should mimic network latency and return a Promise or Observable.
• Email Availability Logic: The validator should return null if the email is available and an error object (e.g., { emailTaken: true }) if the email is already taken.
• Form Integration: Integrate the async validator into an Angular component with a form field for email input.
• User Feedback: Display appropriate feedback to the user based on the validation status (e.g., "Checking email...", "Email is available", "Email is already taken").

Expected Behavior:

1. When the user types into the email input field, the async validator should trigger after a brief delay (to simulate debounce).
2. While the check is in progress, a "checking..." message should be displayed.
3. If the simulated backend indicates the email is available, no error should be shown.
4. If the simulated backend indicates the email is taken, an error message should be displayed.

Edge Cases:

• Empty Input: The validator should handle empty input gracefully (likely relying on a Validators.required sync validator).
• Network Errors: While not strictly required for this challenge, consider how you might handle potential errors from the simulated backend (though for simplicity, we'll assume it always resolves successfully).

Examples

Example 1: Email is Available

• User Input (Email Field): newuser@example.com
• Simulated Backend Response: Promise.resolve(true) (indicating the email is available)
• Validator Output: null (no validation error)
• UI Feedback: "Checking email..." briefly, then no error message for this specific validator.

Example 2: Email is Taken

• User Input (Email Field): existing@example.com
• Simulated Backend Response: Promise.resolve(false) (indicating the email is already taken)
• Validator Output: { emailTaken: true }
• UI Feedback: "Checking email..." briefly, then an error message like "Email is already taken."

Constraints

• The solution must be written in TypeScript.
• The solution must utilize Angular's Reactive Forms module.
• The simulated backend service should introduce a delay of at least 500ms to mimic network latency.
• The async validator should be triggered after a debounce time of at least 300ms.

Notes

• You'll need to create an Angular service to simulate the backend email availability check. This service should return a Promise<boolean> or Observable<boolean>.
• Remember to import AsyncValidator and AbstractControl from @angular/forms.
• Consider using Angular's Validators.email as a synchronous validator for basic email format checking before the async check.
• The component's template will need to conditionally display error messages based on the form control's status and errors.
• Think about how to manage the state of the async validation (e.g., showing a "pending" indicator).