Angular Form Validation Challenge: Building Robust Input Controls

Angular's built-in form validation capabilities are crucial for creating user-friendly and reliable applications. This challenge tasks you with implementing various validators within an Angular form to ensure data integrity and provide helpful feedback to users. You'll be building custom validators and integrating them into a reactive Angular form.

Problem Description

You are tasked with creating an Angular component that features a form with several input fields. The form should include validators to ensure the user enters data in the correct format and within acceptable ranges. Specifically, you need to implement the following validators:

Email Validator: Ensures the input field contains a valid email address format.
Password Strength Validator: Checks if the password meets a minimum length (8 characters) and contains at least one uppercase letter, one lowercase letter, and one number.
Zip Code Validator: Validates that the input is a 5-digit US zip code.
Required Validator: Ensures a field is not empty.

The component should use a reactive form approach. When a validation fails, an error message should be displayed next to the corresponding input field. The form should be disabled until all validations pass.

Key Requirements:

Use Angular's reactive forms.
Implement custom validators as functions.
Display appropriate error messages for each validation failure.
Disable the submit button until the form is valid.
The component should be reusable and well-structured.

Expected Behavior:

The form should initially be invalid.
As the user enters data, the form's validity should update in real-time.
Invalid fields should be highlighted (e.g., with a red border).
Error messages should be clear and informative.
The submit button should be disabled when the form is invalid and enabled when it's valid.
Submitting the form with valid data should trigger a success message (you don't need to implement actual submission logic, just a console log).

Edge Cases to Consider:

Empty input fields.
Invalid email formats (e.g., missing "@" symbol, invalid domain).
Passwords that don't meet the strength criteria.
Zip codes that are not exactly 5 digits.
Handling of whitespace in input fields.

Examples

Example 1:

Input: Email field: "test@example.com", Password field: "P@ssword1", Zip Code field: "12345", Name field: "John Doe"
Output: Form is valid. Submit button is enabled.  Console log: "Form submitted successfully!"
Explanation: All validators pass, and the form is considered valid.

Example 2:

Input: Email field: "testexample.com", Password field: "password", Zip Code field: "1234", Name field: ""
Output: Form is invalid. Submit button is disabled. Error messages displayed: "Invalid email format", "Password does not meet strength requirements", "Zip code must be 5 digits", "Name is required."
Explanation: Several validators fail, preventing form submission.

Example 3: (Edge Case)

Input: Email field: "  test@example.com  ", Password field: "P@ssword1", Zip Code field: " 12345 ", Name field: "  "
Output: Form is invalid. Submit button is disabled. Error messages displayed: "Name is required." (Whitespace is trimmed, but the field is still considered empty).
Explanation: Leading/trailing whitespace in the name field is trimmed, but the field is still considered empty, triggering the required validator.

Constraints

The solution must be implemented using Angular 14 or higher.
The component should be self-contained and easily testable.
The validators should be implemented as reusable functions.
The form should use reactive forms.
The solution should be well-commented and easy to understand.
Performance is not a primary concern for this challenge, but avoid unnecessarily complex or inefficient code.

Notes

Consider using Angular's Validators service for built-in validators like Validators.required.
You can use Angular Material or any other UI library for styling, but it's not required. Focus on the validation logic.
Think about how to make your validators reusable across different forms.
The password strength validator can be simplified if needed, but it should at least check for minimum length and the presence of uppercase, lowercase, and numeric characters.
Remember to import necessary Angular modules (e.g., ReactiveFormsModule).