Building a User Registration Form with Angular Template-Driven Forms

This challenge focuses on implementing a user registration form using Angular's template-driven form approach. You will create a form that allows users to input their personal details and validate them directly within the HTML template. This is a common requirement in web applications for collecting and submitting user data.

Problem Description

Your task is to build a responsive user registration form in Angular. This form should collect the following information:

• First Name: Required, must contain at least 2 characters.
• Last Name: Required, must contain at least 2 characters.
• Email: Required, must be a valid email format.
• Password: Required, must be at least 8 characters long.
• Confirm Password: Required, must match the password.

You will use Angular's template-driven forms to manage the form state, validation, and submission. The form should visually indicate validation errors to the user. Upon successful submission (all fields valid), the form data should be logged to the console.

Key Requirements:

1. Component Setup: Create an Angular component for the registration form.
2. Template-Driven Forms: Utilize FormsModule and the ngModel directive for two-way data binding.
3. Form Structure: Use an HTML <form> element with ngForm directive for managing the form.
4. Input Fields: Implement input fields for each of the required data points.
5. Validation: Implement the following validations:
   • Required: For all fields.
   • Minlength: For First Name, Last Name, and Password.
   • Email Format: For Email.
   • Custom Password Match Validation: For Confirm Password to ensure it matches the Password field.
6. Error Display: Display clear error messages below each input field when validation fails. Only show errors after the user has interacted with the field (e.g., touched or submitted the form).
7. Submit Button: A submit button that is enabled only when the form is valid.
8. Form Submission: On successful submission, log the form data to the browser's console.
9. Styling (Optional but Recommended): Basic CSS to make the form presentable and highlight errors.

Expected Behavior:

• When a user types into a field, the validation messages should appear/disappear as per the rules.
• The submit button should be disabled if any required field is empty, if validation rules are not met, or if the passwords don't match.
• Clicking the submit button should trigger the form submission and log the data if all validations pass.

Edge Cases:

• What happens if the user types in a field, then deletes it? (Should show the required error).
• What happens if the user types a password, then changes it before typing the confirm password? (Confirm password validation should re-evaluate).

Examples

Example 1: Initial Form State

Input: The user has just navigated to the registration page. No fields have been interacted with.

Output: A form with all input fields empty. The submit button is disabled. No validation messages are displayed.

Explanation: The form is in its initial state, and no user interaction has occurred, so no validations are active yet, and the submit button remains disabled.

Example 2: Form with Validation Errors

Input: The user has attempted to submit the form without filling out any fields, or has entered invalid data (e.g., email without "@", password less than 8 characters).

Output:

• "First Name is required." (and so on for all fields)
• "Please enter a valid email address."
• "Password must be at least 8 characters long."
• "Passwords do not match." (if applicable) The submit button remains disabled.

Explanation: Angular's template-driven forms detect the validation failures based on the directives and rules defined in the template and display the corresponding error messages.

Example 3: Successful Submission

Input: The user has filled in all fields correctly, including matching passwords, and clicks the submit button.

Output: The form data is logged to the console in a JavaScript object format. For example:

{
  "firstName": "Jane",
  "lastName": "Doe",
  "email": "jane.doe@example.com",
  "password": "SecurePassword123",
  "confirmPassword": "SecurePassword123"
}

The form might reset or navigate away, depending on further implementation.

Explanation: All validation rules passed, enabling the submit button. Upon clicking, the onSubmit function is called, which retrieves the form data and logs it.

Constraints

• Angular version: 12+
• TypeScript version: 4.0+
• The form must be implemented using template-driven forms. Reactive forms are not permitted for this challenge.
• All specified validations must be implemented.
• Error messages should be user-friendly and clearly indicate the nature of the error.
• The submit button should be disabled if the form is invalid.

Notes

• You will need to import FormsModule into your Angular module.
• Use template reference variables (e.g., #myForm="ngForm") to access the form object in your template.
• Consider using the ? optional chaining operator when accessing form control properties to avoid runtime errors.
• For the password match validation, you might need to create a custom template validator or leverage the ngForm's ability to cross-validate fields. A custom directive is a clean way to handle this.
• Think about how to conditionally display error messages only when a field has been interacted with (e.g., using touched or dirty properties).