Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

@moh3n9595
Copy link
Contributor

This PR refactors the error formatting in antd-zod so that multiple validation errors for a given field are returned as arrays of strings rather than a single concatenated error message. This change improves flexibility and allows consumers to display all errors separately.

Changes

1. formatErrors.ts

  • Refactor Error Formatter:
    Instead of accumulating a single string per field, error messages are now collected into an array.
    • If multiple issues occur on the same field, each error message is pushed into an array.
  • Example Change:
    return errors.issues.reduce((formattedErrors, issue) => {
      try {
        const path = getIssueAntdPath(schema, issue);
        if (formattedErrors[path]) {
          formattedErrors[path].push(issue.message);
        } else {
          formattedErrors[path] = [issue.message];
        }
      } catch (e) {
        console.warn(e);
      }
      return formattedErrors;
    }, {} as { [key: string]: string[] });

2. validateFields.ts

  • Return Type Updated:
    The function now returns a promise resolving to an object with error messages as string arrays ({ [key: string]: string[] }).
  • Example Change:
    const validateFields = async <T extends ZodRawShape>(
      schema: AntdFormZodSchema<T>,
      values: {},
    ): Promise<{ [key: string]: string[] }> => {
      const valuesWithPlaceholders = prepareValues(schema, values);
      const res = await schema.safeParseAsync(valuesWithPlaceholders);
      if (res.success) {
        return {} as Record<keyof T, string[]>;
      }
      return formatErrors(schema, res.error);
    };

3. createSchemaFieldRule.ts

  • Updated Validator Behavior:
    Tests have been updated to expect rejection with an array of errors (e.g., ["Required"]).

4. Tests

  • Updated and New Tests:
    • Tests for formatErrors, validateFields, and createSchemaFieldRule have been updated to account for the new error array format.
    • New tests ensure that multiple errors are properly returned.
    • For example, validating an empty string on a required field now returns { field: ["Required"] } instead of a single string.

Motivation

  • Enhanced Error Handling:
    Returning errors as arrays provides better control and allows for more flexible UI designs.
  • Better Testing & Documentation:
    Updated tests and a Storybook example ensure clarity and proper usage of the new error format.

Impact

  • Improved User Experience:
    Consumers of antd-zod can now choose to display multiple errors separately in any format they prefer.

Thank you for reviewing this PR. I look forward to your feedback and suggestions!

Copy link
Owner

@MrBr MrBr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just fix one comment and I'll probably release it today in the evening after I do few tests.

});
it("should return multiple errors", () => {
const formattedErrors = formatErrors(schema, fakeZodError);
console.log(formattedErrors)
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove the log

@MrBr MrBr merged commit 64ca727 into MrBr:main Apr 10, 2025
@MrBr
Copy link
Owner

MrBr commented Apr 10, 2025

Thanks for implementing the needed changes. It's been published to NPM in the latest release https://github.com/MrBr/antd-zod/releases/tag/v6.1.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants