Form Error

import { type AnyFormApi, type DeepKeys, useField } from "@tanstack/react-form";
import type { InputHTMLAttributes } from "react";

import { cn } from "@/lib/utils";

import { type GetFormData } from "@/components/ui/forms/helpers";

export type FormErrorProps<TForm extends AnyFormApi> = Omit<
    InputHTMLAttributes<HTMLParagraphElement>,
    "name" | "form"
> & {
    form: TForm;
    name: DeepKeys<GetFormData<TForm>>;
};

export const FormError = <TForm extends AnyFormApi>({ form, name = "", className, ...rest }: FormErrorProps<TForm>) => {
    const field = useField({
        form,
        name,
    });

    const errors = field.state.meta.errors[0];
    const error = typeof errors === "object" ? errors.message : errors;

    return (
        <>
            {error && (
                <p {...rest} className={cn("text-destructive text-sm", className)}>
                    {error}
                </p>
            )}
        </>
    );
};

import { type AnyFormApi, type DeepKeys, type FormApi } from "@tanstack/react-form";

export type GetFormData<TForm> =
    TForm extends FormApi<infer TData, any, any, any, any, any, any, any, any, any, any, any> ? TData : never;

export const setFieldError = <TForm extends AnyFormApi>(
    form: TForm,
    field: DeepKeys<GetFormData<TForm>>,
    error: string,
) => {
    form.setFieldMeta(field, (prev) => ({
        ...prev,
        errorMap: {
            ...prev.errorMap,
            onSubmit: error,
        },
    }));
};

export const clearFormErrors = <TForm extends AnyFormApi>(form: TForm) => {
    form.setErrorMap({ onDynamic: { fields: {} } });
};