harsh-harlequin

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,
  },
});

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>

  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.

11 Replies

other-emerald•5mo ago

you can implement your slug logic in the name field's listener property. Read up on it here: https://tanstack.com/form/latest/docs/framework/react/guides/basic-concepts#listeners

Basic Concepts and Terminology | TanStack Form React Docs

Field statesThis page introduces the basic concepts and terminology used in the @tanstack/react-form library. Familiarizing yourself with these concepts will help you better understand and work with the library....

other-emerald•5mo ago

for your case, you would fetch the meta of the slug field and determine if it has been touched before, and not override the value if it has.

harsh-harlequinOP•5mo ago

I was looking at the listener propery. does this work on a custom appform field that you created? i will give this a try That didn't work

harsh-harlequinOP•5mo ago

harsh-harlequinOP•5mo ago

I also checked the browser. any other way? Ok i can pass a custom onChange function as prop to the textfield

other-emerald•5mo ago

AppField has the property

<form.AppField name="name" listeners={{
  onChange: ({ value }) => console.log(value)
}}>
  {field => <field.TextField label="Name" type="text" />}
</form.AppField>

<form.AppField name="name" listeners={{
  onChange: ({ value }) => console.log(value)
}}>
  {field => <field.TextField label="Name" type="text" />}
</form.AppField>

not the field component

harsh-harlequinOP•5mo ago

Ok that worked thanks a lot How would you set the value of the slugs textfield from the form?

other-emerald•5mo ago

use the field context within the text field and use it to access value and meta the point of these field components is that you don‘t need to add in the usual boilerplate

harsh-harlequinOP•5mo ago

i want to get the value and meta from the parent form component. so i could get the name's value and use it to set slug

other-emerald•5mo ago

the flow is off. You should set the slug value from the name‘s onChange listener using the provided formApi

harsh-harlequinOP•5mo ago

That worked thanks 👍

Gaming

Programming

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

Did you find this page helpful?