React Hook Form动态字段错误提示未随输入修正自动消失求助

问题分析 #

你使用的React Hook Form v5.7.2默认验证模式为onSubmit，只有提交表单时才会触发验证并更新错误状态。修正输入后没有重新触发验证，导致错误提示一直保留，直到下一次提交。

解决方案 #

1. 开启实时验证模式（最直接的解决方法） #

修改useForm的初始化配置，添加mode选项设置为onChange（或onBlur/all），让表单在输入内容变化时自动触发验证，实时更新错误状态：

const formMethods = useForm<FormValues>({
  defaultValues: {
    ...defaultValues,
  } as FormValues,
  validationResolver,
  validationContext: formSchema,
  mode: 'onChange', // 关键配置：输入变化时自动验证
});

2. 优化字段注册（可选，增强稳定性） #

在注册动态字段时，可明确指定验证触发的时机（与zod规则保持一致），确保验证逻辑正确绑定：

{teamFields.map((_, idx) => (
  <div key={idx}>
    <input
      name={`team[${idx}].name`}
      ref={formMethods.register(`team[${idx}].name`, {
        required: 'Please enter a name',
      })}
    />
    <input
      name={`team[${idx}].role`}
      ref={formMethods.register(`team[${idx}].role`, {
        required: 'Please enter a role',
      })}
    />
    {/* 错误提示部分保持不变 */}
    {formMethods.errors?.team?.[idx]?.name && 
      <span>{formMethods.errors.team[idx].name.message}</span>
    }
    {formMethods.errors?.team?.[idx]?.role && 
      <span>{formMethods.errors.team[idx].role.message}</span>
    }
  </div>
))}

3. 手动触发验证（备选方案） #

如果上述配置仍未生效，可在输入变化时手动调用trigger方法触发对应字段的验证：

首先从formMethods中解构出trigger：

const {
  register,
  errors,
  trigger, // 获取trigger方法
  // 其他需要的方法...
} = formMethods;

然后在输入框的onChange事件中触发验证：

<input
  name={`team[${idx}].name`}
  ref={register(`team[${idx}].name`)}
  onChange={(e) => {
    formMethods.setValue(`team[${idx}].name`, e.target.value);
    trigger(`team[${idx}].name`); // 手动触发该字段验证
  }}
/>

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