Building a Simple Reactive Form in Angular

This challenge focuses on implementing a basic reactive form in Angular using ReactiveFormsModule. Reactive forms offer a powerful and flexible way to manage form data and validation, and understanding how to create them is a core skill for Angular developers. Your task is to build a form that collects user input for a name and email address, with basic validation to ensure the email is in a valid format.

Problem Description

You need to create an Angular component that displays a form with two fields: "Name" (text input) and "Email" (text input). The form should be built using ReactiveFormsModule. The "Email" field should have validation to ensure it's a valid email address format (e.g., using a regular expression). The component should display error messages next to the fields when validation fails. The form should also have a submit button. When the form is submitted (and valid), a console log should display the submitted data.

Key Requirements:

Use ReactiveFormsModule to build the form.
Implement validation for the "Email" field using a regular expression.
Display error messages next to the invalid fields.
Handle form submission and log the form data to the console when the form is valid.
The component should be a standalone component.

Expected Behavior:

The component renders a form with "Name" and "Email" fields.
The "Email" field validation prevents submission with invalid email formats.
Error messages are displayed next to the fields when they are invalid.
When the form is valid and submitted, the "Name" and "Email" values are logged to the console.
The form should reset after successful submission.

Edge Cases to Consider:

Empty input fields.
Invalid email formats (e.g., missing "@" symbol, invalid characters).
Form submission with invalid data.

Examples

Example 1:

Input: Form with Name = "John Doe" and Email = "john.doe@example.com" (valid)
Output: Console log: { name: "John Doe", email: "john.doe@example.com" }
Explanation: The form is valid, so the data is logged to the console.

Example 2:

Input: Form with Name = "Jane Doe" and Email = "jane.doe" (invalid)
Output: Error message displayed next to the Email field: "Please enter a valid email address."
Explanation: The email format is invalid, so the error message is displayed.  Submission is prevented.

Example 3:

Input: Form with Name = "" and Email = "test@test.com"
Output: No error message for Name field (as no validation is required). Console log: { name: "", email: "test@test.com" }
Explanation: The email is valid, and the form is submitted. The name field is empty, but no validation is applied.

Constraints

The component must be a standalone Angular component.
The email validation regular expression should be reasonably robust (e.g., ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$).
The solution should be well-structured and readable.
No external libraries beyond Angular's built-in modules are allowed.
The component should be functional and demonstrate a clear understanding of reactive forms.

Notes

Remember to import ReactiveFormsModule in your module.
Use FormBuilder to create the form group and controls.
Utilize Validators to implement validation rules.
Consider using FormControlStatus to determine the validity of the form.
Think about how to handle the form submission event and display appropriate feedback to the user.
Focus on creating a clean and maintainable solution.