React Hook Form

"use client";
 
import { useForm, Controller } from "react-hook-form";
 
interface LoginForm {
  email: string;
  password: string;
  rememberMe: boolean;
}
 
function LoginForm() {
  const {
    register,
    handleSubmit,
    control,
    formState: { errors, isSubmitting },
  } = useForm<LoginForm>({
    defaultValues: { email: "", password: "", rememberMe: false },
  });
 
  async function onSubmit(data: LoginForm) {
    await fetch("/api/login", { method: "POST", body: JSON.stringify(data) });
  }
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* register — para inputs nativos */}
      <input {...register("email", { required: "Email es requerido" })} />
      {errors.email && <span>{errors.email.message}</span>}
 
      <input type="password" {...register("password", { minLength: 8 })} />
 
      {/* Controller — para componentes controlados */}
      <Controller
        name="rememberMe"
        control={control}
        render={({ field }) => (
          <label>
            <input type="checkbox" checked={field.value} onChange={field.onChange} />
            Recuérdame
          </label>
        )}
      />
 
      <button type="submit" disabled={isSubmitting}>Iniciar sesión</button>
    </form>
  );
}

"use client";
 
import { useForm, useFieldArray } from "react-hook-form";
 
interface Ingredient {
  name: string;
  amount: string;
}
 
interface RecipeFormData {
  title: string;
  description: string;
  servings: number;
  ingredients: Ingredient[];
}
 
export function RecipeEditor() {
  const {
    register,
    handleSubmit,
    control,
    formState: { errors, isSubmitting, isDirty },
    reset,
    watch,
  } = useForm<RecipeFormData>({
    defaultValues: {
      title: "",
      description: "",
      servings: 4,
      ingredients: [{ name: "", amount: "" }],
    },
  });
 
  const { fields, append, remove } = useFieldArray({
    control,
    name: "ingredients",
  });
 
  const watchTitle = watch("title");
 
  function onSubmit(data: RecipeFormData) {
    console.log("Recipe:", data);
    reset(data); // limpia isDirty
  }
 
  return (
    <form onSubmit={handleSubmit(onSubmit)} className="max-w-lg space-y-4">
      <h2 className="text-lg font-bold">
        {watchTitle || "Nueva Receta"}
      </h2>
 
      <div>
        <input
          {...register("title", { required: "El título es requerido" })}
          placeholder="Título de la receta"
          className="w-full rounded border p-2"
        />
        {errors.title && <p className="text-sm text-red-600">{errors.title.message}</p>}
      </div>
 
      <textarea
        {...register("description")}
        placeholder="Descripción"
        className="w-full rounded border p-2"
        rows={3}
      />
 
      <input
        type="number"
        {...register("servings", { valueAsNumber: true, min: 1 })}
        className="w-32 rounded border p-2"
      />
 
      <fieldset className="space-y-2">
        <legend className="font-semibold">Ingredientes</legend>
        {fields.map((field, index) => (
          <div key={field.id} className="flex gap-2">
            <input
              {...register(`ingredients.${index}.name`, { required: true })}
              placeholder="Ingrediente"
              className="flex-1 rounded border p-2"
            />
            <input
              {...register(`ingredients.${index}.amount`)}
              placeholder="Cantidad"
              className="w-24 rounded border p-2"
            />
            <button type="button" onClick={() => remove(index)} className="text-red-500">
              Eliminar
            </button>
          </div>
        ))}
        <button
          type="button"
          onClick={() => append({ name: "", amount: "" })}
          className="text-sm text-blue-600"
        >
          + Agregar ingrediente
        </button>
      </fieldset>
 
      <div className="flex gap-3">
        <button
          type="submit"
          disabled={isSubmitting}
          className="rounded bg-blue-600 px-4 py-2 text-white disabled:opacity-50"
        >
          Guardar
        </button>
        {isDirty && <span className="self-center text-sm text-amber-600">Cambios sin guardar</span>}
      </div>
    </form>
  );
}

const { register } = useForm({
  mode: "onBlur",         // validar al perder foco (por defecto: "onSubmit")
  reValidateMode: "onChange", // re-validar al cambiar después del primer error
});

const { setValue, getValues, trigger } = useForm();
 
// Establecer un campo individual
setValue("email", "new@example.com", { shouldValidate: true });
 
// Obtener todos los valores
const all = getValues();
 
// Activar validación manualmente
await trigger("email");       // campo individual
await trigger();              // todos los campos

const { reset } = useForm<ProfileForm>({
  defaultValues: async () => {
    const res = await fetch("/api/profile");
    return res.json();
  },
});

// register fuertemente tipado — captura errores tipográficos en tiempo de compilación
register("emial"); // Error de TS: "emial" no es una clave de LoginForm
 
// Errores tipados
errors.email?.message; // string | undefined
 
// Tipo UseFormReturn para pasar métodos de formulario como props
import type { UseFormReturn } from "react-hook-form";
 
function FormSection({ form }: { form: UseFormReturn<LoginForm> }) {
  return <input {...form.register("email")} />;
}
 
// FieldPath para componentes de campo genéricos
import type { FieldPath, FieldValues } from "react-hook-form";
 
function TextInput<T extends FieldValues>({
  name,
  control,
}: {
  name: FieldPath<T>;
  control: Control<T>;
}) {
  return <Controller name={name} control={control} render={({ field }) => <input {...field} />} />;
}