2

我有一个带有 react-hook-form 的设置,是的,在 NextJS 中进行表单验证。Lingui 用于国际化(遵循此文档)。如何在 Lingui 支持的 yup 验证器中设置国际化?

我面临的问题是在更改语言后,yup 验证器的错误是英文的。

// 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: 'Must be a valid email',
      })
    )
    .required(
      t({
        id: 'email-required-validation',
        message: 'Email is a required field',
      })
    ),
});
// pages/auth.js


export const Auth = () => {

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

    <Controller
       name='email'
       control={control}
       render={({ field }) => (
                 <Input
                   placeholder='johndoe@gmail.com'
                      {...field}
                      ref={null}
                    />
              )}
     />
                {errors.email && (
                  <DangerText>
                    // need to display translated errors here
                  </DangerText>
                )}
}

谢谢你。

4

0 回答 0