TanStackT
TanStack•10mo ago•
19 replies
uncertain-scarlet

Is there a way to have a custom onChange handler for AppFormFields ?

I have a form that have a name field and a slug field.

I am using form composition to create the form like this:

export const { useAppForm } = createFormHook({
  fieldContext,
  formContext,
  fieldComponents: {
    TextField,
    FileField,
  },
  formComponents: {
    SubmitButton,
  },
});

  const form = useAppForm({
    defaultValues: {
      name: '',
      slug: '',
      logo: null,
    } as FormSchemaType,
    validators: {
      onSubmit: createFormSchema,
    },
    onSubmit: async (values) => {
      console.log(values);
    },
  });
//...
//...
          <form.AppField name="name">
              {field => (
                <field.TextField label="Name" type="text" />
              )}
            </form.AppField>
            <form.AppField name="slug">
              {field => (
                <field.TextField label="Slug" type="text" />
              )}
            </form.AppField>
            <form.AppField name="logo">
              {field => (
                <field.FileField label="Logo" />
              )}
            </form.AppField>
  <form.AppForm>
            <form.SubmitButton label="Create" />
  </form.AppForm>

I would like to automatically generate the slug once the user types name into the field. Also it should be once so if the user edits the generated slug, it won't change again. It should accept the changed value.
Was this page helpful?