Dynamic Form Validation Error Display in Vue

Building user-friendly web applications often involves forms that require user input. It's crucial to provide clear and immediate feedback to the user when their input is invalid. This challenge focuses on creating a dynamic system for displaying form validation errors in a Vue.js application using TypeScript. You will implement a component that handles different types of validation errors and presents them elegantly to the user.

Problem Description

You need to create a Vue 3 component, FormErrors.vue, that intelligently displays validation error messages associated with a form. This component should be flexible enough to handle various error scenarios and present them in a user-friendly manner.

Key Requirements:

1. Component Structure: Create a Vue component named FormErrors.vue.
2. Props: The component should accept a prop named errors. This errors prop will be an object where keys represent form field names (e.g., email, password) and values are arrays of strings, each string being a validation error message for that field. If a field has no errors, its corresponding value in the object should be an empty array or the key might be absent.
3. Display Logic:
   • If the errors object is empty or contains no fields with error messages, the component should render nothing.
   • For each field that has errors, the component should display the field name and then list all its associated error messages.
   • Error messages for a single field should be displayed in a clear, distinguishable manner (e.g., a list).
   • The component should visually indicate that these are error messages (e.g., using a distinct CSS class).
4. TypeScript Integration: The component should be written in TypeScript, ensuring type safety for the errors prop.
5. Styling: Apply a basic CSS class, error-message-container, to the main wrapper of the error display and error-message to each individual error message for styling purposes.

Expected Behavior:

When the errors prop is passed to the FormErrors component:

• If errors is {} or null or undefined, the component renders nothing.
• If errors is { email: ["Invalid email format"], password: [] }, it should display "Email" followed by "Invalid email format" (perhaps in a list item). The "password" field, having no errors, should not be displayed.
• If errors is { username: ["Required", "Must be at least 5 characters"], age: ["Must be a positive number"] }, it should display "Username" followed by two error messages, and then "Age" followed by one error message.

Edge Cases:

• Handling null, undefined, or non-object values for the errors prop gracefully (though the primary focus is on the defined structure).
• Fields with empty error arrays should not be displayed.

Examples

Example 1:

Input (errors prop):
{
  email: ["Invalid email format"],
  password: []
}

Output (rendered HTML):
<div class="error-message-container">
  <h3>Email</h3>
  <ul>
    <li class="error-message">Invalid email format</li>
  </ul>
</div>

Explanation: The email field has one error, which is displayed. The password field has an empty error array, so it's not rendered.

Example 2:

Input (errors prop):
{
  username: ["Required", "Must be at least 5 characters"],
  age: ["Must be a positive number"]
}

Output (rendered HTML):
<div class="error-message-container">
  <h3>Username</h3>
  <ul>
    <li class="error-message">Required</li>
    <li class="error-message">Must be at least 5 characters</li>
  </ul>
</div>
<div class="error-message-container">
  <h3>Age</h3>
  <ul>
    <li class="error-message">Must be a positive number</li>
  </ul>
</div>

Explanation: Both username and age fields have errors. The username field has two errors listed, and the age field has one.

Example 3:

Input (errors prop):
{}

Output (rendered HTML):
(Nothing is rendered)

Explanation: An empty errors object means no fields have errors, so the component renders nothing.

Constraints

• The errors prop will be a JavaScript object.
• The keys of the errors object will be strings representing form field names.
• The values of the errors object will be arrays of strings, where each string is an error message.
• You are working within a Vue 3 SFC (Single File Component) environment using TypeScript.

Notes

• Consider how you will iterate over the errors object to display the relevant fields and messages.
• The structure of the output HTML is a suggestion; you can adapt it slightly as long as the information is clearly presented and the specified CSS classes are used.
• Think about how you would make the field names more presentable (e.g., capitalizing the first letter). This is a bonus but not strictly required for the core functionality.
• You don't need to implement the validation logic itself; assume the errors prop is correctly populated by a parent component.