Angular Form Validation: Building a Robust User Registration Form

This challenge focuses on implementing client-side form validation in an Angular application. You will create a user registration form that enforces specific rules for user input, providing immediate feedback to the user and preventing submission of invalid data. This is a fundamental skill for building interactive and user-friendly web applications.

Problem Description

Your task is to create an Angular component that displays a user registration form. This form should include fields for:

• Username: Must be at least 5 characters long and cannot contain spaces.
• Email: Must be a valid email address format.
• Password: Must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, one number, and one special character (e.g., !, @, #, $, %, ^, &, *).
• Confirm Password: Must match the Password field exactly.

You need to implement validation for each of these fields. When a user interacts with the form (e.g., types in a field, blurs from a field), validation errors should be displayed clearly to the user. The form should only be submittable if all fields are valid.

Key Requirements:

• Use Angular's built-in Reactive Forms module for form management.
• Implement custom validation logic where necessary (e.g., password complexity, username format).
• Display error messages dynamically next to each invalid field.
• Disable the submit button if the form is invalid.
• On successful submission, log the form data to the console.

Expected Behavior:

• As the user types, validation messages should appear/disappear as appropriate.
• If a user leaves a field blank, an "is required" message should be displayed (for relevant fields).
• Upon attempting to submit an invalid form, all relevant error messages should be visible.
• Once the form is valid and submitted, the console should show the submitted data.

Edge Cases to Consider:

• User types, then deletes valid input, making it invalid.
• User enters password, then types a different confirm password.
• User enters a username with spaces.
• User enters an email that is not in a valid format.

Examples

Example 1:

Scenario: User is filling out the form.

Input (User Interaction):

• Username field: User types "Alice".
• Email field: User types "alice@example.com".
• Password field: User types "Password123!".
• Confirm Password field: User types "Password123!".

Output (Visual/Console):

• Initially, all fields are empty. Error messages for "Username is required", "Email is required", etc., are displayed.
• As the user types "Alice", the "Username is required" error disappears. The "Username must be at least 5 characters long" error might still be shown if "Alice" is less than 5.
• After entering "alice@example.com", the email error disappears.
• After entering a valid password, the password error disappears.
• After entering a matching confirm password, the confirm password error disappears.
• The submit button becomes enabled.
• If the user clicks "Submit", the console logs:

  {
    username: "Alice",
    email: "alice@example.com",
    password: "Password123!",
    confirmPassword: "Password123!"
  }
  

Example 2:

Scenario: User attempts to submit an invalid form.

Input (User Interaction):

• Username field: Left empty.
• Email field: User types "invalid-email".
• Password field: User types "short".
• Confirm Password field: User types "different".
• User clicks "Submit".

Output (Visual):

• Username field displays: "Username is required."
• Email field displays: "Invalid email format."
• Password field displays: "Password must be at least 8 characters long." and "Password must contain an uppercase letter, a lowercase letter, a number, and a special character."
• Confirm Password field displays: "Passwords do not match."
• The submit button remains disabled.

Example 3:

Scenario: Username with spaces.

Input (User Interaction):

• Username field: User types "Alice Smith".
• User blurs from the username field.

Output (Visual):

• Username field displays: "Username cannot contain spaces."

Constraints

• The solution must be implemented using Angular version 15 or later.
• All form controls and validation logic must be managed by Angular's Reactive Forms.
• No external third-party validation libraries are allowed.
• The component should be self-contained and runnable within a standard Angular CLI project.
• The solution should be efficient and avoid unnecessary re-renders.

Notes

• Familiarize yourself with FormBuilder, FormGroup, FormControl, Validators, and custom validator functions in Angular's Reactive Forms.
• Consider how you will structure your validation messages to be user-friendly.
• Think about the order in which validation should be applied (e.g., required first, then format, then complexity).
• The goal is to demonstrate a solid understanding of implementing robust client-side validation in an Angular application.