Map API validation errors to form fields

Convert nested server validation issues into typed field groups and form-level errors.

EasyTypeScript Forms

30 min0% acceptance

Description

Implement mapValidationErrors for server issues whose paths may contain object keys and array indices. Normalize paths into dot notation, group repeated messages per field in stable order, keep pathless issues as form errors, tolerate malformed issues, and return fresh typed collections without mutating the payload.

Requirements

Export a mapValidationErrors function from src/App.tsx.
Join valid nested object path segments with dots.
Render nonnegative numeric array indices in canonical bracket notation such as addresses[0].city.
Append repeated messages for the same normalized field instead of overwriting them.
Collect valid messages with missing or empty paths as form-level errors.
Skip malformed paths and non-string or blank messages without throwing.
Preserve issue order within field arrays and the form error array.
Expose fieldErrors as Record<string, readonly string[]> and formErrors as readonly string[].
Leave the issues array, paths, and issue objects unchanged.

Nested array field

Input

path ['addresses', 0, 'city'], message 'City is required'

Expected output

fieldErrors['addresses[0].city'] contains the message

Explanation

Numeric indices use bracket notation while object keys use dots.

Form issue

Input

An issue has an empty path and message 'Request expired'

Expected output

formErrors contains Request expired

Explanation

Pathless failures belong to the form rather than an arbitrary control.

Constraints

Accept string keys and nonnegative integer indices
Trim messages but do not deduplicate them
Return objects with no inherited field names

Hints

Hint 1

Validate every segment before joining a path.

Hint 2

Build each field bucket lazily in the order issues arrive.

Hint 3

Format a numeric segment as brackets and insert dots only before string segments.

TypeScriptformsvalidation