Building a Simple User Profile Reactive Form in Angular

This challenge focuses on creating a reactive form in Angular to capture user profile information. Reactive forms offer a powerful and testable way to manage form state and validation, making them a crucial skill for Angular developers. Your task is to build a form that collects a user's name, email, and age, with appropriate validation rules.

Problem Description

You need to create an Angular component that displays a reactive form for collecting user profile data. The form should include the following fields:

Name: A text input field, required.
Email: An email input field, required and must be a valid email format.
Age: A number input field, required and must be a number greater than or equal to 18.

The form should:

Initialize with empty values.
Display validation errors inline next to the respective input fields when the user enters invalid data.
Disable the submit button until all fields are valid.
Upon successful submission (all fields valid), display a confirmation message. The form data should not be sent to a server; simply display the message.

Key Requirements:

Use Angular's FormGroup, FormControl, and Validators to create the reactive form.
Implement custom validators for the age field to ensure it's a number greater than or equal to 18.
Utilize Angular's FormsModule for form-related directives.
The component should be well-structured and maintainable.

Expected Behavior:

The form loads with all fields empty and the submit button disabled.
As the user types, validation errors are displayed immediately next to the invalid fields.
The submit button becomes enabled only when all fields are valid.
Upon submitting the form (clicking the submit button), a confirmation message "Profile Updated Successfully!" is displayed. The form remains populated with the entered data.

Edge Cases to Consider:

Empty input fields should trigger the "required" validation error.
Invalid email formats should trigger the email validation error.
Age values less than 18 should trigger the age validation error.
Non-numeric values entered in the age field should trigger a validation error.

Examples

Example 1:

Input: Name: "", Email: "invalid-email", Age: "15"
Output: All fields display validation errors (required for name, invalid email format for email, age must be 18 or greater for age). Submit button is disabled.
Explanation: The form is initialized with invalid data, triggering the appropriate validation errors.

Example 2:

Input: Name: "John Doe", Email: "john.doe@example.com", Age: "25"
Output: All fields are valid. Submit button is enabled. Clicking submit displays "Profile Updated Successfully!".
Explanation: All fields contain valid data, enabling the submit button and triggering the success message upon submission.

Example 3: (Edge Case)

Input: Name: "Jane Doe", Email: "jane.doe@example.com", Age: "abc"
Output: Name and Email are valid. Age displays "Age must be a number". Submit button is disabled.
Explanation:  The age field contains non-numeric input, triggering a validation error.

Constraints

The solution must be a complete, runnable Angular component.
The component should be self-contained and not rely on external services or APIs.
The solution should be written in TypeScript.
The component should be easily understandable and well-commented.
The component should use Angular version 14 or higher.

Notes

Consider using Angular's NgForm and FormBuilder for easier form creation and management.
Think about how to display validation errors clearly and concisely to the user.
Focus on creating a robust and well-structured reactive form that adheres to best practices.
Remember to import necessary modules (FormsModule, ReactiveFormsModule) in your Angular module.
You can use a simple HTML template for displaying the form and the confirmation message. No complex styling is required.