T
TanStack•7mo ago
adverse-sapphire

Duplicate Errors when using same Schema for onChange and onMount validation

Hello! I'm trying to run the same validation onMount and onChange: 
const simpleFormSchema = z.object({
  firstName: z.string().min(4, "must be longer than 4 characters"),
  lastName: z.string().min(4, "must be longer than 4 characters"),
});

const simpleFormOptions = formOptions({
  defaultValues: {
    firstName: "",
    lastName: "",
  },
  validators: {
    onMount: simpleFormSchema,
    onChange: simpleFormSchema,
  },
});
const simpleFormSchema = z.object({
  firstName: z.string().min(4, "must be longer than 4 characters"),
  lastName: z.string().min(4, "must be longer than 4 characters"),
});

const simpleFormOptions = formOptions({
  defaultValues: {
    firstName: "",
    lastName: "",
  },
  validators: {
    onMount: simpleFormSchema,
    onChange: simpleFormSchema,
  },
});
As soon as i start typing in the "firstName" Field I get the error for "lastName" twice. I thought i might have to start by clearing all errors in the onChange handler but I have no Idea how i could "compose" a custom onChange validator function with a StandardSchemaValidator. Somthing like: 
  validators: {
    onMount: simpleFormSchema,
    // onChange: simpleFormSchema,
    onChange: ({ value, formApi }) => {
      const errors = simpleFormSchema["~validate"](value);
      formApi.setErrorMap({
        onMount: null,
        onChange: errors
      });
    },
  },
  validators: {
    onMount: simpleFormSchema,
    // onChange: simpleFormSchema,
    onChange: ({ value, formApi }) => {
      const errors = simpleFormSchema["~validate"](value);
      formApi.setErrorMap({
        onMount: null,
        onChange: errors
      });
    },
  },
5 Replies
grumpy-cyan
grumpy-cyan•7mo ago
How are you displaying the Error(s)?
adverse-sapphire
adverse-sapphireOP•7mo ago
currently like this 
export default function TextField({ label }: { label: string }) {
  const field = useFieldContext<string>();

  const errors = useStore(field.store, (state) => state.meta.errors);

  return (
    <div>
      <label>
        <div>{label}</div>
        <input
          onBlur={field.handleBlur}
          value={field.state.value}
          onChange={(e) => field.handleChange(e.target.value)}
        />
      </label>
      {errors.map((error: any) => (
        <div key={error} style={{ color: "red" }}>
          {error.message}
        </div>
      ))}
    </div>
  );
}
export default function TextField({ label }: { label: string }) {
  const field = useFieldContext<string>();

  const errors = useStore(field.store, (state) => state.meta.errors);

  return (
    <div>
      <label>
        <div>{label}</div>
        <input
          onBlur={field.handleBlur}
          value={field.state.value}
          onChange={(e) => field.handleChange(e.target.value)}
        />
      </label>
      {errors.map((error: any) => (
        <div key={error} style={{ color: "red" }}>
          {error.message}
        </div>
      ))}
    </div>
  );
}
grumpy-cyan
grumpy-cyan•7mo ago
That sounds weird…
should remove onMount error when the form is touched – https://github.com/TanStack/form/blob/v1.0.0/packages/form-core/tests/FormApi.spec.ts#L1576-L1603
Can you make a Stackblitz reproduction?
adverse-sapphire
adverse-sapphireOP•7mo ago
Sure: https://stackblitz.com/edit/vitejs-vite-ynrth1qu?file=src%2Fcomponents%2Ftext-fields.tsx steps: - enter something in firstName field - see that lastName has duplicate Validation messages.
grumpy-cyan
grumpy-cyan•7mo ago
Might be worth opening an Issue for that on Github This might be the Issue I ran into as well when I upgraded to v1 I moved my onChange validations to the fields and only use onMount and onSubmit on the form

Did you find this page helpful?