Field errors array is empty for object fields

[jahirfiquitiva]

Describe the bug

When having a form field that is an object, the field's meta errors array is empty, but the form errors array is not.

The form errors look like this:

[
  {
    "user.id": [
      {
        "code": "too_small",
        "minimum": 3,
        "type": "string",
        "inclusive": true,
        "exact": false,
        "message": "[Zod] Id requires 3 characters",
        "path": ["user", "id"]
      }
    ],
    "user.username": [
      {
        "code": "invalid_type",
        "expected": "string",
        "received": "null",
        "path": ["user", "username"],
        "message": "Expected string, received null"
      }
    ]
  }
]

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-form-va6wcbbw?file=src%2Findex.tsx

Steps to reproduce

1. Create a form with an object as a field
2. Try accessing the field errors
3. Access the form errors
4. See the differences

Expected behavior

The field's errors array should not be empty and instead include the errors with each property of the object

I think the field's error array should look either like this:

[
  {
    "user": [
      {
        "id": [
          {
            "code": "too_small",
            "minimum": 3,
            "type": "string",
            "inclusive": true,
            "exact": false,
            "message": "[Zod] Id requires 3 characters",
            "path": ["user", "id"]
          }
        ]
      },
      {
        "username": [
          {
            "code": "invalid_type",
            "expected": "string",
            "received": "null",
            "path": ["user", "username"],
            "message": "Expected string, received null"
          }
        ]
      }
    ]
  }
]

or like this:

[
  {
    "user": {
      "id": [
        {
          "code": "too_small",
          "minimum": 3,
          "type": "string",
          "inclusive": true,
          "exact": false,
          "message": "[Zod] Id requires 3 characters",
          "path": ["user", "id"]
        }
      ],
      "username": [
        {
          "code": "invalid_type",
          "expected": "string",
          "received": "null",
          "path": ["user", "username"],
          "message": "Expected string, received null"
        }
      ]
    }
  }
]

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

All

TanStack Form adapter

react-form

TanStack Form version

1.1.2

TypeScript version

No response

Additional context

No response

[Balastrong]

I think this is working as expected. Field errors are the errors for that exact field, they do not contain the errors of everything that is nested inside.

In your example you're causing errors on user.id and user.username but then you're reading the errors of user that doesn't have any validator hence no errors to display. That's correct.

In general, you should have a <form.Field ... /> component for each field if you want full control.
If you really want to use the structure of your example (I wouldn't recommend that) you could probably play with zod to move the errors on user instead. I don't exactly remember the syntax but I'm quite sure zod allows that.