Expose type that is attached to fields to able to properly type when passing fields as a prop to child components

[taymoork2]

Describe the bug and the expected behavior

With the new useFormStatus hook it requires that the hook not be called within the same component that <form> lives in due to a pitfall
Since fields is dynamically generated given the schema, trying to type fields when it's passed to the new component becomes a bit of a headache

Conform version

v1.0.2

Steps to Reproduce the Bug or Issue

import { useForm } from '@conform-to/react';
import { parseWithZod } from '@conform-to/zod';
import { useFormStatus } from 'react-dom';
import { z } from 'zod';
import { login } from './your-auth-library';
import { useActionResult, redirect } from './your-server-framework';

// Define a schema for your form
const schema = z.object({
  username: z.string(),
  password: z.string(),
});

// Optional: Server action handler
export async function action({ request }) {
  const formData = await request.formData();
  const submission = parseWithZod(formData, { schema });

  // Send the submission back to the client if the status is not successful
  if (submission.status !== 'success') {
    return submission.reply();
  }

  const session = await login(submission.value);

  // Send the submission with addional error message if login fails
  if (!session) {
    return submission.reply({
      formErrors: ['Incorrect username or password'],
    });
  }

  return redirect('/dashboard');
}

// Client form component
export default function LoginForm() {
  // Grab the last submission result if you have defined a server action handler
  // This could be `useActionData()` or `useFormState()` depending on the framework
  const lastResult = useActionResult();
  const [form, fields] = useForm({
    // Configure when each field should be validated
    shouldValidate: 'onBlur',
    // Optional: Required only if you're validating on the server
    lastResult,
    // Optional: Client validation. Fallback to server validation if not provided
    onValidate({ formData }) {
      return parseWithZod(formData, { schema });
    },
  });

  return (
    <form method="post" id={form.id} onSubmit={form.onSubmit}>
      <div>{form.errors}</div>
      <FormInternals fields={fields} />
    </form>
  );
}

function FormInternals({fields}) {
	const { pending } = useFormStatus();

	return (
		<div>
	        <label>Username</label>
	        <input type="text" name={fields.username.name} disabled={pending} />
	        <div>{fields.username.errors}</div>
      	</div>
      	<div>
	        <label>Password</label>
	        <input type="password" name={fields.password.name}  disabled={pending} />
	        <div>{fields.password.errors}</div>
      	</div>
      	<button  disabled={pending}>Login</button>
      )
}

What browsers are you seeing the problem on?

No response

Screenshots or Videos

No response

Additional context

No response

[edmundhung]

You can pass the form metadata down and retrieves the fields using form.getFieldset() in the child component:

export default function LoginForm() {
  const lastResult = useActionResult();
  const [form, fields] = useForm({
    // ...
  });

  return (
    <form method="post" id={form.id} onSubmit={form.onSubmit}>
      <FormInternals form={form} />
    </form>
  );
}

function FormInternals({ form }: { form: FormMetadata<z.input<typeof schema>> }) {
  const { pending } = useFormStatus();
  const fields = form.getFieldset();

  return (
    <div>
      <label>Username</label>
      <input type="text" name={fields.username.name} disabled={pending} />
      <div>{fields.username.errors}</div>
    </div>
    <div>
      <label>Password</label>
      <input type="password" name={fields.password.name}  disabled={pending} />
      <div>{fields.password.errors}</div>
    </div>
    <button  disabled={pending}>Login</button>
  )
}

or, if you are using form context:

export default function LoginForm() {
  const lastResult = useActionResult();
  const [form, fields] = useForm({
    // ...
  });

  return (
    <FormProvider context={form.context}>
      <form method="post" id={form.id} onSubmit={form.onSubmit}>
        <FormInternals name={form.name} />
      </form>
    </FormProvider>
  );
}

function FormInternals({ name }: { name: FormName<z.input<typeof schema>> }) {
  const { pending } = useFormStatus();
  const [field] = useField(name);
  const fields = field.getFieldset();

  return (
    <div>
      <label>Username</label>
      <input type="text" name={fields.username.name} disabled={pending} />
      <div>{fields.username.errors}</div>
    </div>
    <div>
      <label>Password</label>
      <input type="password" name={fields.password.name}  disabled={pending} />
      <div>{fields.password.errors}</div>
    </div>
    <button  disabled={pending}>Login</button>
  )
}

[samburgers]

If you are just trying to disable inputs/buttons, this can be made very simple with the convenience of html <fieldset disabled>.

Any descendant form controls of the <fieldset> will become disabled too, so no need to move the inputs outside the form component.

const Fieldset = ({ children }) => {
  const { pending } = useFormStatus();
  return <fieldset disabled={pending}>{children}</fieldset>;
};

export default function LoginForm() {
  const [form, { username, password }] = useForm({});

  return (
    <form method="post" id={form.id} onSubmit={form.onSubmit}>
      <Fieldset>
        <div>
          <label htmlFor={username.id}>Username</label>
          {/* No need to set 'disabled' here */}
          <input type="text" id={username.id} name={username.name} />
          <div>{username.errors}</div>
        </div>
        <div>
          <label htmlFor={password.id}>Password</label>
          {/* No need to set 'disabled' here */}
          <input id={password.id} type="password" name={password.name} />
          <div>{password.errors}</div>
        </div>

        {/* No need to set 'disabled' here */}
        <button type="submit">Login</button>
      </Fieldset>
    </form>
  );
}