T
TanStack•7mo ago
foreign-sapphire

Submit form not working

I'm creating my own package for the form. index.tsx 
import { createFormHook } from '@tanstack/react-form'
import { fieldContext, formContext, useFormContext } from './hooks/context'
import { TextField } from './components/Textfield'

function SubscribeButton({ label }: { label: string }) {
  const form = useFormContext()
  return (
    <form.Subscribe
      selector={(state) => [state.canSubmit, state.isSubmitting]}
      children={([canSubmit, isSubmitting]) => (
        <>
          <button type="submit" disabled={!canSubmit}>
            {isSubmitting ? '...' : label}
          </button>          
        </>
      )}
    />
  )
}

export const { useAppForm: useForm, withForm } = createFormHook({
  fieldComponents: {
    TextField,
  },
  formComponents: {
    SubscribeButton,
  },
  fieldContext,
  formContext,
})
import { createFormHook } from '@tanstack/react-form'
import { fieldContext, formContext, useFormContext } from './hooks/context'
import { TextField } from './components/Textfield'

function SubscribeButton({ label }: { label: string }) {
  const form = useFormContext()
  return (
    <form.Subscribe
      selector={(state) => [state.canSubmit, state.isSubmitting]}
      children={([canSubmit, isSubmitting]) => (
        <>
          <button type="submit" disabled={!canSubmit}>
            {isSubmitting ? '...' : label}
          </button>          
        </>
      )}
    />
  )
}

export const { useAppForm: useForm, withForm } = createFormHook({
  fieldComponents: {
    TextField,
  },
  formComponents: {
    SubscribeButton,
  },
  fieldContext,
  formContext,
})
context.tsx 
import { createFormHookContexts } from '@tanstack/react-form'

export const { fieldContext, useFieldContext, formContext, useFormContext } = createFormHookContexts();
import { createFormHookContexts } from '@tanstack/react-form'

export const { fieldContext, useFieldContext, formContext, useFormContext } = createFormHookContexts();
6 Replies
foreign-sapphire
foreign-sapphireOP•7mo ago
textfield.tsx 
import { HTMLInputTypeAttribute } from "react";
import { useFieldContext } from "../hooks/context"
import { Box, Text, TextInput } from "@raikou/core";

interface textFieldProps {
  label: string;
  placeholder: string;
  type?: HTMLInputTypeAttribute
}

export function TextField({ label, placeholder, type }: textFieldProps) {
  const field = useFieldContext<string>()
  
  return (
    <Box component='label' style={{ paddingBottom: "8px", display: "block" }}>
      <Text component="label" htmlFor={field.name}>
        {label}
      </Text>
      <TextInput
        autoComplete="off"
        id={field.name}
        name={field.name}
        placeholder={placeholder}
        value={field.state.value}
        type={type}
        onChange={(e) => field.handleChange(e.target.value)}
      />
    </Box>
    {field.state.meta.errors ? field.state.meta.errors.map((v, i) => {
      return <Text
        key={i}
        size="xs"
        role="alert"
        stx={(theme) => ({
          color: theme.colors.red[6],
        })}>
          {v.message}
        </Text>
      }) : null}
  )
}
import { HTMLInputTypeAttribute } from "react";
import { useFieldContext } from "../hooks/context"
import { Box, Text, TextInput } from "@raikou/core";

interface textFieldProps {
  label: string;
  placeholder: string;
  type?: HTMLInputTypeAttribute
}

export function TextField({ label, placeholder, type }: textFieldProps) {
  const field = useFieldContext<string>()
  
  return (
    <Box component='label' style={{ paddingBottom: "8px", display: "block" }}>
      <Text component="label" htmlFor={field.name}>
        {label}
      </Text>
      <TextInput
        autoComplete="off"
        id={field.name}
        name={field.name}
        placeholder={placeholder}
        value={field.state.value}
        type={type}
        onChange={(e) => field.handleChange(e.target.value)}
      />
    </Box>
    {field.state.meta.errors ? field.state.meta.errors.map((v, i) => {
      return <Text
        key={i}
        size="xs"
        role="alert"
        stx={(theme) => ({
          color: theme.colors.red[6],
        })}>
          {v.message}
        </Text>
      }) : null}
  )
}
Using the form: 
function LoginForm() {
  const form = useForm({
    defaultValues: {
      emailAddress: '',
      password: '',
    },
    onSubmit: ({ value }) => {
      console.log(JSON.stringify(value, null, 2))
    },
  });

  return (
    <Stack gap={8}>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          e.stopPropagation();
          form.handleSubmit();
        }}
      >
        <form.AppField
          name="emailAddress"
          children={(field) => <field.TextField 
            label="Email Address" 
            placeholder="Enter your email address"
            type="email"
          />}
        />
        <form.AppField
          name="password"
          children={(field) => <field.TextField 
            label="Password"
            placeholder="Enter your password"
            type="password"
          />}
        />     
      </form>      
      <form.AppForm>
        <form.SubscribeButton label="Submit" />
      </form.AppForm>      
    </Stack>
  )
}
function LoginForm() {
  const form = useForm({
    defaultValues: {
      emailAddress: '',
      password: '',
    },
    onSubmit: ({ value }) => {
      console.log(JSON.stringify(value, null, 2))
    },
  });

  return (
    <Stack gap={8}>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          e.stopPropagation();
          form.handleSubmit();
        }}
      >
        <form.AppField
          name="emailAddress"
          children={(field) => <field.TextField 
            label="Email Address" 
            placeholder="Enter your email address"
            type="email"
          />}
        />
        <form.AppField
          name="password"
          children={(field) => <field.TextField 
            label="Password"
            placeholder="Enter your password"
            type="password"
          />}
        />     
      </form>      
      <form.AppForm>
        <form.SubscribeButton label="Submit" />
      </form.AppForm>      
    </Stack>
  )
}
metropolitan-bronze
metropolitan-bronze•7mo ago
your submit button is outside of the form and therefore will not fire the form's onSubmit make sure that <form> wraps <button type="submit"/>
conscious-sapphire
conscious-sapphire•7mo ago
You could add a DebugOutput Component that you expose via the createFormHook as well and output the relevant information from the state 
<form.Subscribe
   selector={(state) => [state.errors, state.values]}
   children={(data) => (
      <pre>{JSON.stringify(data, null, 2)}</pre>
   )}
 />
<form.Subscribe
   selector={(state) => [state.errors, state.values]}
   children={(data) => (
      <pre>{JSON.stringify(data, null, 2)}</pre>
   )}
 />
foreign-sapphire
foreign-sapphireOP•7mo ago
That's it. I totally missed in the old code that I'm pulling from. 😮‍💨
No description
metropolitan-bronze
metropolitan-bronze•7mo ago
glad to hear that it works now!
foreign-sapphire
foreign-sapphireOP•7mo ago
Thanks for the help! Much appreciated!

Did you find this page helpful?