Pass and type a form as prop

[marco-mercuri]

We are trying to pass a simple form as prop to a component in order to wrap and make a reusable <form.Field>:

// form.tsx
const form = useForm({
	defaultValues: {
		email: 'test@example.com',
		currentPassword: '',
		newPassword: '',
		confirmPassword: '',
	},
	validators: { onSubmit: zodSchema },
	onSubmit: ({ value }) => {
		console.log('Form data:', value);
	},
});

// field.tsx
  interface FormFieldProps<TParentData, TName extends DeepKeys<TParentData>> {
        form: ReactFormExtendedApi<any, any, any, any, any, any, any, any, any, any>;
        name: TName;
  }

export function FormTextField<
  TParentData,
  TName extends DeepKeys<TParentData>,
>({
  name,
  form,
}: FormFieldProps<TParentData, TName>) {
  return (
    <form.Field
      name={String(name)}
    >
      {field => (
        // <input ... />
      )}
    </form.Field>
  );
}

How to avoid the use of all the anys in the prop type definition in field.tsx? How should we proper type it?

Thanks :)

[uzakovnikita]

the same question about it

[Balastrong]

We now have a new API for composing forms: https://tanstack.com/form/latest/docs/framework/react/guides/form-composition

[uzakovnikita]

Hi! Thanks for answering my question. I studied the documentation that you attached to the answer, but I don't understand from this documentation how I can make a component that will contain validation logic and it will not be tied to a specific form

if I use the api from the documentation, I get the following:

import { z } from "zod";
import { ZodFieldInfo, withForm } from "@shared";

export const clientNameSchema = z
  .string({
    required_error: "required",
    invalid_type_error: "not valid format",
  })
  .min(3, "name should have length more than 3")
  .max(10, "name should have length less than 11");

export const NameField = withForm({
  defaultValues: {
    name: "",
  },
  render: function Render({ form }) {
    return (
      <div>
        <form.AppField
          name="name"
          validators={{
            onBlur: clientNameSchema,
          }}
        >
          {(field) => (
            <>
              <field.TextField label="Ваше имя" />
              <ZodFieldInfo field={field} />
            </>
          )}
        </form.AppField>
      </div>
    );
  },
});

and I can use it in parent form which is defined with name field only, and if parent form has another fields, then typescript will be throw error. May you please say to me what I am doing wrong?

[frankMamoPay]

Is it possible to pass custom prop to Render() - like: onRemove, or something?

[iamvanja]

Is this available for Vue? How would the prop form be typed?

[LeCarbonator]

Not yet, but here's the PR to track: #1455

[jaskang]

I have a working example of this implementation here that you might find helpful: #2031