TanStackT
TanStack•9mo ago•
12 replies
dead-brown

Multiple reusable fields in one component

Hey, I'm just learning the API and have a question about composition.

I want to create a component that contains multiple fields and is reusable across mutiple forms. For that i created a defaultValue setting with just the used fields in the component:

import TextField from "@/components/form/fields/TextField";
import { withForm } from "@/components/form/hooks/form";
import { FC } from "react";
import { NatsSubjectInput } from "@/dtos/testingclient";
export const SubjectField = withForm({
  defaultValues: {
    subject: {
      fromString: "",
      parseAsTemplate: true,
    } as NatsSubjectInput,
  },
  render: function Render({ form }) {
    return (
      <>
        <form.AppField
          name="subject.fromString"
          children={(field) => (
            <>
              <field.TextField label="Subject" placeholder="orders" />
            </>
          )}
        />
        <form.AppField
          name="subject.parseAsTemplate"
          children={(field) => (
            <field.CheckboxField label="Parse as template" />
          )}
        />
      </>
    );
  },
});


Now when i use the component in the main form component (which has these fields and many more), it complains that the form input isn't correct:

 Type '{ subject: NatsSubjectInput; }' is missing the following properties from type 'PublishSpec': count, body


So how is it possible to group two ore more fields and make them reusable?
Was this page helpful?