Form Composition Question

I'm learning how to do form composition and I wanted to check if this is expected behavior:

<form.AppField
        name="formName"
        children={(field) => (
          <>
            <FieldLabel>Form name*</FieldLabel>
            <FieldDescription>Enter the name of the form</FieldDescription>
            <Input
              aria-describedby={`${field.name}-description ${field.name}-errors`}
            />
            <FieldErrors />
          </>
        )}
      />

<form.AppField
        name="formName"
        children={(field) => (
          <>
            <FieldLabel>Form name*</FieldLabel>
            <FieldDescription>Enter the name of the form</FieldDescription>
            <Input
              aria-describedby={`${field.name}-description ${field.name}-errors`}
            />
            <FieldErrors />
          </>
        )}
      />

I'm using

useFieldContext()

useFieldContext()

in each of the components and despite not registering them in my

createFormHook()

createFormHook()

or using

field.[ComponentName]

field.[ComponentName]

under my AppField rendering function, they work as expected.

Is this fully erroneous or more of a "it works but don't do that" situation?

Also tangential question while I'm here: Is there a more concise/efficient way to register each of my components without manually using

value={...}

value={...}

and

onChange={...}

onChange={...}

for each one?

TanStack•9mo ago•

8 replies

dead-brown

Form Composition Question

I'm learning how to do form composition and I wanted to check if this is expected behavior:

<form.AppField
        name="formName"
        children={(field) => (
          <>
            <FieldLabel>Form name*</FieldLabel>
            <FieldDescription>Enter the name of the form</FieldDescription>
            <Input
              aria-describedby={`${field.name}-description ${field.name}-errors`}
            />
            <FieldErrors />
          </>
        )}
      />

<form.AppField
        name="formName"
        children={(field) => (
          <>
            <FieldLabel>Form name*</FieldLabel>
            <FieldDescription>Enter the name of the form</FieldDescription>
            <Input
              aria-describedby={`${field.name}-description ${field.name}-errors`}
            />
            <FieldErrors />
          </>
        )}
      />

I'm using

useFieldContext()

useFieldContext()

in each of the components and despite not registering them in my

createFormHook()

createFormHook()

or using

field.[ComponentName]

field.[ComponentName]

value={...}

value={...}

and

onChange={...}

onChange={...}

for each one?

Form Composition Question

Form Composition Question

Similar Threads