Conform项目中useControl与日期输入值转换问题解析

问题现象

在使用Conform表单库时，开发者发现当结合Mantine的DatePickerInput组件使用useControl时，日期值在表单提交时会被自动转换为ISO格式字符串，而不是预期的"DD/MM/YYYY"格式。而同样的场景下，useInputControl则没有这个问题。

问题根源分析

这个问题的本质在于表单控件与UI组件库之间的交互方式。当开发者直接将name属性传递给Mantine的DatePickerInput组件时，Mantine会在内部自动生成一个隐藏的input元素，这个隐藏input的值会使用ISO格式的日期字符串。

Conform的useControl在这种情况下无法覆盖Mantine的默认行为，因为：

1. Mantine组件内部已经处理了表单提交的值
2. 隐藏input的值优先于我们通过useControl设置的值
3. 浏览器表单提交机制会收集所有具有name属性的表单元素值

解决方案

要完全控制表单提交的值，可以采用以下模式：

// 首先声明一个隐藏的input作为实际表单字段
<input
  type="hidden"
  ref={control.register}
  name={fields.control.name}
  defaultValue={control.value}
/>

// 然后使用DatePickerInput仅作为UI展示
<DatePickerInput
  label="useControl"
  placeholder="Pick date"
  valueFormat="DD/MM/YYYY"
  value={control.value ? stringToDate(control.value) : null}
  onChange={(value) => control.change(value ? dateToString(value) : '')}
  error={fields.control.errors}
/>

技术原理

这种解决方案之所以有效，是因为：

1. 隐藏input通过ref={control.register}与Conform的表单控制绑定
2. 移除了DatePickerInput上的name属性，防止Mantine生成额外的隐藏input
3. 通过value和onChange完全控制了组件的值流向
4. 表单提交时只会收集我们显式定义的隐藏input的值

最佳实践建议

在处理日期输入时，建议：

1. 明确区分UI展示格式和表单提交格式
2. 对于复杂表单控件，考虑使用隐藏input作为实际表单字段
3. 避免依赖UI组件库的自动表单处理逻辑
4. 在onChange回调中进行必要的格式转换
5. 使用类型守卫函数确保数据格式一致性

总结

Conform与UI组件库的集成需要开发者明确控制数据流。通过分离UI展示和表单字段，可以避免隐式的格式转换问题，确保表单数据的一致性和可预测性。这种模式不仅适用于日期输入，也适用于其他需要自定义格式的复杂表单控件。