Formik表单选择日期后文本字段自动报错如何解决

你的代码存在两处核心问题：

1. 日期字段endDate的输入控件错误绑定了comment字段的value属性，导致字段状态联动异常
2. Yup验证规则中给comment字段加了required()必填校验，初始值为空时只要触发验证就会判定为错误

1. 修正日期控件的绑定错误 #

将日期输入的value属性调整为对应endDate字段的值，修正后代码如下：

<Form.Control
  value={formikProps.values.endDate} // 替换原错误的comment绑定
  type="date"
  name="endDate"
  aria-label="from date"
  role="date"
  onChange={formikProps.handleChange}
  isInvalid={!!formikProps.errors.endDate}
/>

2. 调整验证规则适配需求 #

如果你希望comment字段允许为空，直接移除Yup规则中comment的required()校验即可：

const schema = yup.object().shape({
  comment: yup.string(), // 移除required()，允许空值
  endDate: yup.string().required(),
});

3. 可选：调整验证触发时机 #

如果你需要保留comment为必填项，但不希望在填写其他字段时提前触发空值报错，可以关闭Formik默认的变更/失焦验证，仅在提交时校验：

<Formik
  initialValues={{
    comment: '',
    endDate: '',
  }}
  onSubmit={(values) => {}}
  validationSchema={schema}
  validateOnChange={false} // 关闭字段变更时自动校验
  validateOnBlur={false} // 关闭字段失焦时自动校验
>

类型错误说明 #

不要从initialValues中移除comment字段，只要保留初始值为空字符串，配合上面的规则调整，即可解决Property 'comment' does not exist的类型报错。

内容的提问来源于stack exchange，提问作者Greg-A