How to use validatorsAsync for a "submit on change" behavior?

[luisfontes]

Hello,

I'm building a form where the desired behavior is for inputs to be saved 'as you type'. I was able to do that using async validators + debounce:

<form.AppField
  name="name"
  validators={{
    onChange: z.string(),
    onChangeAsyncDebounceMs: 1000,
    onChangeAsync: async ({value}) => {
      return updateBusinessDetails({
        params: {name: value},
        onError: () => form.resetField('name'),
       });
     },
}}
>
  {(field) => <field.TextField label="Business Name" type="text" />}
</form.AppField>

So far, that's working fine. However, I need to use the above boilerplate for all fields in all forms. Validation needs to run at a field level instead of the form level, as I only want to react to the active field being updated and save only its value, instead of saving the whole form on every update.

Is there a way to abstract that validation logic into a form component or something similar?

I've tried using withForm but wasn't able to get it to work (onChange validator running, but errors were not propagated to the field)

type WithFormProps<T extends string> = {
  name: DeepKeys<Record<T, string>>;
  label: string;
  type?: 'text' | 'textarea';
  schema: z.ZodString;
};

const InputFactory = <T extends string>(defaultValues: Record<T, string>) =>
  withForm({
    defaultValues,
    props: {
      name: '',
      label: '',
      type: 'text',
      schema: z.string(),
    } as WithFormProps<T>,
    render: function Render({form, name, label, type = 'text', schema}) {
      return (
        <form.AppField
          name={name}
          validators={{
            onChange: ({value}) => {
              const result = schema?.safeParse(value);
              if (!result.success) {
                return result.error.format()._errors.join(', ');
              }
              return undefined;
            },
          }}
        >
          {(field) => <field.TextField label={label} type={type} />}
        </form.AppField>
      );
    },
  });

export const Example = () => {
  const defaultValues = {
    email: 'test@test.com',
  };
  const form = useAppForm({defaultValues});
  const InputField = InputFactory(defaultValues);

  return <InputField form={form} name="email" label="Email" schema={z.string().email()} />;
};

Any suggestions on how to correctly abstract the validator's logic, or how I could achieve the desired save-as-you-type behavior without that much boilerplate?