Method to set both form-level and field-level error message - likely by extending form.setErrorMap()

[johanfive]

This feature request is based off discussion 716 here.

Clarification:

const form = useForm({
    defaultValues: {},
    onSubmit: ({ value }) => {}, // <--- When I say "onSubmit" I refer to this guy here
    validators: {
        onSubmit: ({ value }) => {} // <--- When I say "validators.onSubmit" I refer to this guy here
    }
  });

It is a rare thing for server API implementors to expose an endpoint strictly dedicated to validation / verification of data.

validators.onSubmit is very convenient but, in practice, we'd almost always just POST the data to an endpoint and trust that it'll respond with a 400 and some details in the response payload.

So it'd be good to have a mean to handle a failed request that was fired off in onSubmit.

This currently works:

const form = useForm({
    defaultValues: {
      age: 0,
      name: '',
      email: '',
    },
    onSubmit: ({ value: formData }) => {
      createUser.mutateAsync(formData)
        .then(() => form.reset())
        .catch((error: ApiError) => {
          let errorMessage = 'Unable to create user';
          if (error.message === 'Conflict') {
            errorMessage = 'User already exists';
          }
          // This backend's validation relies on https://github.com/standard-schema/standard-schema
          if (Array.isArray(error.details)) {
            error.details.forEach((detail) => {
              const field = detail.path[0] as keyof typeof formData;
              // this is 1 way to do it, currently:
              form.setFieldMeta(field, {
                errorMap: {
                  onSubmit: detail.message,
                },
                errors: [],
                isBlurred: false,
                isDirty: true,
                isPristine: false,
                isTouched: true,
                isValidating: false,
              });
            });
          }
          // combined with this:
          form.setErrorMap({
            onSubmit: errorMessage,
          });
        });
    },
  });

With that we get both a form-level error and field-level errors, great! But it's quirky...setFieldMeta forces us (TypeScript) to specify everything, the errors: [] is completely ignored and only errorMap: {} is effective.

It'd be a better experience if we could do this instead:

form.setErrorMap({
  onSubmit: {
    form: "form-level error message",
    fields: {
        "fieldName3": "field3-level error message",
        "fieldName5": "field5-level error message",
    }
  }
});

This would feel very intuitive, especially since we can see that the type of state.errorMap.onSubmit is

(property) onSubmit?: string | false | {
    form?: ValidationError;
    fields: Partial<Record<string, ValidationError>>;
} | null | undefined

in a <form.Subscribe selector={(state) => [state.errorMap.onSubmit]}></form.Subscribe>.