切换语言时Zod表单验证错误信息未清除的问题求助

开发基于Zod验证的表单应用，支持语言切换功能，但切换语言后，表单的错误信息不会重置，仍显示旧语言的错误内容。需要通过useEffect实现语言切换时自动清除并更新错误信息。

解决方案 #

1. 监听语言变化，重置字段错误 #

在PhoneField组件中添加useEffect监听语言状态变化，当语言切换时重置当前字段的错误信息。

修改后的PhoneField组件代码：

import { useEffect, useState } from 'react';
import { PhoneInput, validatePhone } from 'react-international-phone';
import { cn } from '@shared/utils';
import { useDescription, useTsController } from '@ts-react/form';
import { useTranslation } from 'react-i18next'; // 若使用react-i18next
// import { useRouter } from 'next/router'; // 若使用Next.js路由locale

import { useStyles } from '../../../../hooks/useStyles';
import ErrorMessage from './ErrorMessage';
import Label from './Label';
import { inputClassNames } from './mapping';

import 'react-international-phone/style.css';

export function PhoneField(props: { required?: boolean }) {
  const { field, error, resetError } = useTsController<string>();
  const { label } = useDescription();
  const { rounded } = useStyles();
  
  // 获取当前语言状态（二选一，根据你的多语言方案）
  const { i18n } = useTranslation();
  // const { locale } = useRouter();

  // 监听语言变化，重置字段错误
  useEffect(() => {
    if (error?.errorMessage) {
      resetError();
    }
  }, [i18n.language, resetError]); // 依赖项：当前语言 + 重置错误方法

  return (
    <>
      <Label label={label} error={error} required={props.required} />
      <PhoneInput
        defaultCountry="fr"
        value={field.value}
        onChange={field.onChange}
        className={cn(rounded, {
          'ring-1 ring-red-500': error?.errorMessage,
        })}
        inputClassName={inputClassNames}
      />
      <ErrorMessage {...error} />
    </>
  );
}

2. 更新Zod Schema为多语言错误消息 #

将硬编码的错误消息替换为多语言翻译内容，确保重置后显示对应语言的错误信息。

修改后的Zod Schema代码：

import i18n from '../path/to/your/i18n/config'; // 导入你的i18n实例

export const phoneSchemaWithValidation = createUniqueFieldSchema(
  z.string().refine((data) => validatePhone(data).isValid, {
    message: () => i18n.t('form.errors.invalidPhoneNumber'), // 动态获取当前语言的翻译
  }),
  'phone',
);

关键说明 #

• 确保useTsController提供了resetError方法（如果没有，可查看@ts-react/form文档，使用对应字段错误重置API，或触发表单重新验证）。
• 多语言状态的获取需匹配你的项目方案：用react-i18next则取i18n.language，用Next.js路由则取locale。
• Zod Schema的错误消息需改为动态函数，确保每次验证都使用当前语言的翻译文本。

内容的提问来源于stack exchange，提问作者Dylan Dorvilma