Angular Template-Driven Form for User Profile

This challenge focuses on building a user profile form using Angular's template-driven approach. Template-driven forms offer a straightforward way to handle form data directly within the HTML template, making them ideal for simpler forms and scenarios where you want to keep the form logic close to the view. Your task is to create a form that collects user information and validates it.

Problem Description

You need to implement an Angular component that displays a template-driven form for collecting user profile information. The form should include fields for:

Name: A text input field (required).
Email: An email input field (required, must be a valid email format).
Age: A number input field (required, must be a positive integer).
City: A text input field (optional).

The form should:

Validate each field as the user types.
Display appropriate error messages for invalid fields (e.g., "Name is required," "Invalid email format," "Age must be a positive integer").
Disable the submit button until all required fields are valid.
Upon successful submission (all fields valid), log the form data to the console. The logged data should be an object with keys corresponding to the form field names (e.g., { name: 'John Doe', email: 'john.doe@example.com', age: 30, city: 'New York' }).

Edge Cases to Consider:

Empty input fields for required fields.
Invalid email formats (e.g., missing "@" symbol, invalid characters).
Non-numeric or negative values for the age field.
Handling of whitespace in input fields.

Examples

Example 1:

Input: Form with all fields filled with valid data (name: "Alice", email: "alice@example.com", age: 25, city: "London")
Output: Console log: { name: 'Alice', email: 'alice@example.com', age: 25, city: 'London' }
Explanation: The form data is successfully collected and logged.

Example 2:

Input: Form with only the name field filled ("Bob"), and other fields empty.
Output: Submit button is disabled. Error messages are displayed for email, age, and city.
Explanation: The required fields are invalid, preventing form submission.

Example 3:

Input: Form with name: "Charlie", email: "charlie.example.com", age: -5, city: "Paris"
Output: Submit button is disabled. Error messages are displayed for email, age, and city.
Explanation: Email is invalid, age is negative, and city is empty.

Constraints

Angular Version: Use Angular version 14 or higher.
Form Validation: Utilize Angular's built-in form validation features (required, pattern).
Performance: The form should respond quickly to user input and validation changes. Avoid unnecessary computations.
HTML Structure: The HTML structure should be clean and well-organized, following best practices for template-driven forms.
No External Libraries: Do not use any external libraries for form validation or handling.

Notes

Consider using Angular's ngModel directive for two-way data binding between the form fields and the component's properties.
Utilize Angular's Validators to define validation rules.
Pay close attention to error message display and user feedback. Clear and concise error messages are crucial for a good user experience.
Think about how to handle whitespace in input fields (e.g., trimming whitespace before validation).
The component should be self-contained and reusable.