es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Lingui y el validador Yup en NextJS

06 Aug, 2023 Programación

Tengo una configuración con react-hook-form, yup en NextJS para la validación de formularios. Lingui para la internacionalización (seguí esta documentación). ¿Cómo configuro la internacionalización en el validador yup que es compatible con Lingui?

El problema que enfrento aquí es que después de cambiar el idioma, los errores del validador yup están en inglés.

// src/validation/auth.js

import * as yup from 'yup';
import { t } from '@lingui/macro';

export const signupEmailSchema = yup.object({
  email: yup
    .string()
    .email(
      t({
        id: 'email-valid-validation',
        message: 'Debe ser un correo electrónico válido',
      })
    )
    .required(
      t({
        id: 'email-required-validation',
        message: 'El correo electrónico es un campo requerido',
      })
    ),
});

// pages/auth.js

export const Auth = () => {
  const {
    handleSubmit,
    control,
    formState: { errors },
  } = useForm({ resolver: yupResolver(signupEmailSchema) });

  return (
    <controller name='email' control="{control}" render="{({" field="" })=""> (
        <input placeholder='johndoe@gmail.com' {...field}="" ref="{null}">
      )}
    />
    {errors.email && (
      <dangertext>
        // Necesito mostrar los errores traducidos aquí
      </dangertext>
    )}
  );
}

Gracias.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para configurar la internacionalización en el validador yup compatible con Lingui, puedes utilizar el método setLocale de Lingui para establecer la configuración regional actual para yup. Una vez establecida la configuración regional, yup utilizará los mensajes de error traducidos para esa configuración regional.

    Aquí tienes un fragmento de código actualizado para el signupEmailSchema:

    import * as yup from 'yup';
import { t } from '@lingui/macro';
import { i18n } from '@lingui/core'; // importar el objeto i18n de Lingui

export const signupEmailSchema = yup.object({
  email: yup
    .string()
    .email(
      t({
        id: 'email-valid-validation',
        message: 'Debe ser un correo electrónico válido',
      })
    )
    .required(
      t({
        id: 'email-required-validation',
        message: 'El correo electrónico es un campo obligatorio',
      })
    ),
});

// Actualizar la configuración regional cada vez que se cambie el idioma
i18n.on('change', () => {
  yup.setLocale(i18n.locale);
});

    Y en el componente Auth, puedes mostrar los errores traducidos de la siguiente manera:

    {errors.email && (
  <dangertext>{errors.email.message}</dangertext>
)}

    Asumiendo que DangerText es un componente personalizado que muestra el mensaje de error en rojo u otro color.

Comments are closed.