Custom Validator: Setting errors on fields inside useFieldArray

[lordkerwin]

We have a custom schema built using TypeBox, but for legacy package reason, we can't use the typebox resolver.

Our schema is quite complex, but I've built a custom resolver to validate and return errors.

For top level field errors, they work and appear. But for anything nested/created under a useFieldArray, I can't for some reason, set the errors.

Currently my useForm looks like this.

const form = useForm<EditMessengerFormSchema>({
    resolver: async (data) => {
      const { errors, value } = validateFormSchema(data);

      if (errors) {
        console.log("errors", errors);
      }

      return {
        values: errors ? {} : value,
        errors: errors
          ? errors.reduce((previous, currentError) => {
              const _path = currentError.instancePath.substring(1).replace(/\//g, ".");

              const newErr: FieldError = {
                type: currentError.keyword,
                message: currentError.message,
                ref: {
                  name: _path,
                  value: currentError.params,
                },
              };

              console.log({ _path, newErr });

              return {
                ...previous,
                [_path as string]: newErr,
              };
            }, {})
          : {},
      };
    },
    defaultValues: {
      messengerName: messenger.draftRevision?.name ?? messenger.activeRevision.name,
      config: config,
    },
    mode: "onChange",
  });

My validate function is like this:

const validate = ajvFormats(ajv).compile(EditMessengerFormSchema);

export const validateFormSchema = (
  value: Record<string, unknown>
):
  | { isValid: true; value: EditMessengerFormSchema; errors: null }
  | { isValid: false; value: null; errors: DefinedError[] } => {
  const newValue = { ...value };
  if (!validate(newValue)) {
    return {
      isValid: false,
      value: null,
      errors: validate.errors as DefinedError[],
    };
  }

  return {
    isValid: true,
    value: newValue,
    errors: null,
  };
};

now, in the resolver, if the validateFormSchema returns errors, they're Typebox/Ajv style errors like this.

{
    instancePath: "/config/routes/0/cards/1/card/flowId",
    keyword: "minLength",
    message: "must NOT have fewer than 1 characters",
    params: {
      limit: 1
    }
}

Which is fine, as in my form, there's a useFieldArray for config.routes and then nested inside that is another for the config.routes.0.cards.

Appending, updating and removing things using the fieldArray is fine, that all works. and the form does stop submission is the data is invalid, but it just doesn't parse down the errors to the components, no matter what I try.

I'm just wondering if there's something in my resolver that im doing wrong when returning the errors.

I have this bit const _path = currentError.instancePath.substring(1).replace(/\//g, "."); which changes /config/routes/0/cards/1/card/flowId to config.routes.0.cards.1.card.flowId to use as the key for the errors object.

Any help would be greatly appreciated, sorry I can't share my entire form schema as its huge and broken over multiple files.

[jdvsch]

Hi Sean,

I am facing the same problem, have you managed to solve it?

[jdvsch]

this can help you
https://github.com/orgs/react-hook-form/discussions/10598