Did errors changed?

[megacherry]

I've recently updated to v1. But now my errors look like:

the error in black is this code (like in the example):

{field.state.meta.errors ? (
                <em role="alert">{field.state.meta.errors.join(', ')}</em>
              ) : null}

and the red one is a separate component:

export const FieldInfo = (props: FieldInfoProps) => {
  const { className, field } = props

  if (field.state.meta.errors.length === 0) return null

  return (
    <span className={cn('text-destructive text-sm font-medium', className)}>
      {field.state.meta.isTouched && field.state.meta.errors.length ? (
        <>{field.state.meta.errors.join(',')}</>
      ) : null}
      {field.state.meta.isValidating ? 'Validating...' : null}
    </span>
  )
}

This is the field.state.meta.errors array:

The array is apparently no longer flat, but consists of objects.

[Balastrong]

Yes, we were previously only returning the message field of Standard Schema errors, while now you have control over the entire error object.

This should bring back the old behaviour:

-field.state.meta.errors.join(',')
+field.state.meta.errors.map(error => error.message).join(',')

[craigmcc]

I ran into the same issue, and found the same solution. However, basically all the examples in the TSF docs (even in 1.1.2) still show surfacing errors the old way, triggering the [object Object] issue. It would be great if those examples could be updated to show the new way.

[Balastrong]

Hey @craigmcc, if you want to raise a PR updating the outdated examples that would be awesome :)

[craigmcc]

I can take a crack at those. I'm new to your codebase - can you point me at where the docs are in the repo?

[Balastrong]

All you need to know about docs: https://github.com/TanStack/form/blob/main/CONTRIBUTING.md#editing-the-docs-locally-and-previewing-the-changes

Let me know if something is missing/unclear!

[craigmcc]

Opened a PR with the changes for React. I'm not familiar enough with Angular, Solid, or Vue to make the corresponding changes there -- search for "errors.join" in their respective /guides/validation.md to find the places that need to be updated.

[hedefalk]

I have ui components expecting a list of errors per field. Any better solution than piping everything through:

const adaptErrors = (errors: Array<StandardSchemaV1Issue | undefined>) =>
  errors.filter((error) => error !== undefined).map((error) => error.message);

I in particular don't like that undefined and I don't understand why that's needed…?

I'm using valibot, very basic usage:

import { StandardSchemaV1Issue, useForm } from "@tanstack/react-form";
import * as v from "valibot";

const schema = v.object({
  name: v.pipe(v.string(), v.nonEmpty("Please provide name"))
});

export default function AReactComponent() {
  const form = useForm({
    defaultValues: {
      name: ""
    },
    validators: {
      onChange: schema
    }
  });

  return (
    <form.Field name="name">
      {(field) => (
        <>
          <input id={field.name} type="text" defaultValue={field.state.value} />
          <ErrorComponent errors={field.state.meta.errors} />
        </>
      )}
    </form.Field>
  );
}

type Errors = string[]; //  Type 'undefined' is not assignable to type 'string'.
type Errors2 = Array<string | undefined>; // Type 'StandardSchemaV1Issue' is not assignable to type 'string'.
type Errors3 = Array<StandardSchemaV1Issue | undefined>; // Works

const ErrorComponent = ({ errors }: { errors: Errors3 }) => {
  return errors.join(", ");
};

[ahmafi]

Did you find any solutions yet?

[craigmcc]

The secret to this is a comment that was made on this issue -- when you are using a validator at the form level, the thing you get back from field.state.meta.errors is an array of the error objects returned from your validator -- not an array of strings. Alas, I have yet to see anything about this in the documentation, or any examples.

If you are in that situation, do something like this instead:

const ErrorComponent = ({ errors }: { errors: Array<StandardSchemaV1Issue | undefined> }) => {
  return errors.map((e => e.message)).join(', ');
};

This will work for any validator that implements StandardSchema (including Zod, which I use). If you are using a validator that does not support this, examine the type of the errors object returned by your validator, and adjust accordingly.

[craigmcc]

Thanks! I will take a look later today.

…

On Fri, Mar 28, 2025 at 9:57 AM Leonardo Montini ***@***.***> wrote: All you need to know about docs: https://github.com/TanStack/form/blob/main/CONTRIBUTING.md#editing-the-docs-locally-and-previewing-the-changes Let me know if something is missing/unclear! — Reply to this email directly, view it on GitHub <#1284 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAA7ZLXLME6NAWSRZXWUKHL2WVWNXAVCNFSM6AAAAABZCSEZZCVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENRVGU3TEOI> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[craigmcc]

I have updated my local branch of the "form" directory -- (in prep for a pull request) for at least the React related pages -- not positive it will be correct for Angular or Solid, although it will definitely be similar.

However, GitHub is not letting me push these changes to my branch on "form" -- named "craigmcc-doc-updates". I'm a newbie at doing PRs on someone else's repo. What am I missing?

[kusiewicz]

@craigmcc bit late to the party but:

https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/fork-a-repo#propose-changes-to-someone-elses-project