React-Hook-Form提交时表单字段无法设为dirty状态怎么解决？

问题根源 #

你当前的错误提示逻辑只在字段变为dirty时才显示错误，但点击提交时，未交互过的字段不会自动标记为dirty，导致这些字段的错误无法展示。同时，直接访问formState.errors.firstName.message会在字段无错误时报错（因为formState.errors.firstName可能为undefined）。

具体修改步骤 #

1. 调整错误显示条件：把错误提示的触发逻辑改成「表单已提交 或 字段已变为dirty」，这样提交时不管字段有没有被修改过，都会显示对应的错误。
2. 安全访问错误信息：先判断formState.errors.firstName是否存在，再读取message，避免出现undefined报错。
3. 绑定正确的提交逻辑：用methods.handleSubmit包裹你的提交函数，确保提交时触发全量校验。

修改后的代码示例：

const methods = useForm<FormProps>({
  mode: 'onChange', // 保持输入时实时校验，符合你的需求
  defaultValues: {
    ...user.data,
  },
  resolver: yupResolver(validationSchema),
});

// 定义提交处理函数
const onSubmit = (data: FormProps) => {
  // 这里写你的提交逻辑，比如调用后端接口
};

// 表单字段部分
<ColumnStack spacing={0}>
  <InputLabel>First Name</InputLabel>
  <Controller
    control={methods.control}
    name='firstName'
    render={({ field, formState }) => {
      const fieldError = formState.errors.firstName;
      // 错误显示条件：表单已提交 或 字段已dirty，且存在错误
      const showError = (formState.isSubmitted || formState.dirtyFields.firstName) && fieldError;
      
      return (
        <TextField
          placeholder='Enter Your First Name'
          error={showError}
          helperText={showError ? fieldError.message : ''}
          disabled={loading}
          {...field}
        />
      );
    }}
  />
</ColumnStack>

// 提交按钮部分
<button onClick={methods.handleSubmit(onSubmit)} disabled={loading}>
  提交
</button>

额外说明 #

如果确实需要在提交时强制把所有字段标记为dirty，可以在提交函数里调用methods.setDirtyFields({ firstName: true, /* 其他字段同理 */ })，但更推荐上面的方式——利用React Hook Form内置的isSubmitted状态，逻辑更简洁。

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