useFieldIssues()

Overview

export function useFieldIssues<
  TOutput extends object,
  TPath extends FieldPath.Segments,
>(form: UseForm<TOutput>, path: TPath): StandardSchemaV1.Issue[];

• TOutputrepresents the final validated shape of your form data. It defines the full object structure that the form is expected to produce after successful validation and submission.
• TPathrepresents the strongly-typed path (as segment tuples) pointing to a specific leaf inside TOutput.

useFieldIssues() is a React hook that allows you to access the validation issues associated with a specific form field within your components.

It will only re-render the component when the specific field's issues change, making it an efficient way to bind to form field issues without causing unnecessary re-renders from other parts of the form.

Configurations

Type Reference

Returns an array of validation issues associated with the specified field, or an empty array if there are no issues or if the field is not found in the form controller.

StandardSchemaV1.Issue[];

Examples

📚 Basic Usage

interface FormData {
  user: {
    email: string;
  };
}

function EmailIssues(props: { form: UseForm<FormData> }) {
  const fieldPath = props.form.path.of("user.email");

  const emailIssues = useFieldIssues(props.form, fieldPath);

  return (
    <div className="email-field">
      {emailIssues.map((issue, index) => (
        <div key={index} className="field-issue">
          {issue.message}
        </div>
      ))}
    </div>
  );
}