35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
import { UseFormReturn } from "react-hook-form";
|
|
|
|
export const FormDebug = ({ form }: { form: UseFormReturn }) => {
|
|
const {
|
|
watch,
|
|
formState: { isDirty, dirtyFields, defaultValues },
|
|
} = form;
|
|
|
|
const currentValues = watch();
|
|
|
|
return (
|
|
<div className='p-4 border rounded bg-red-50 mb-6'>
|
|
<p>
|
|
<strong>¿Formulario modificado?</strong> {isDirty ? "Sí" : "No"}
|
|
</p>
|
|
<div className='mt-2'>
|
|
<strong>Campos modificados:</strong>
|
|
{Object.keys(dirtyFields).length > 0 ? (
|
|
<ul className='list-disc list-inside mt-1'>
|
|
{Object.keys(dirtyFields).map((campo) => (
|
|
<li key={campo}>
|
|
<span className='font-medium'>{campo}:</span>{" "}
|
|
<span className='text-gray-500 line-through'>{String(defaultValues![campo])}</span>{" "}
|
|
➝ <span className='text-green-600'>{String(currentValues[campo])}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
) : (
|
|
<p>Ninguno</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|