MUI V5 DateTimePicker 未显示预期的 Yup 验证错误消息答案

【问题标题】：MUI V5 DateTimePicker not displaying the expected Yup validation error messageMUI V5 DateTimePicker 未显示预期的 Yup 验证错误消息
【发布时间】：2022-06-21 23:47:31
【问题描述】：

我正在使用 Yup、React Hook Form 和 MUI V5 构建一个表单。我正在使用来自 MUI V5 的DateTimePicker，但它没有按预期显示 Yup 的错误消息。理想情况下，错误应显示如下：

无效的格式消息：无效的日期格式。 (mm/dd/yyyy hh:mm am 或下午）
必填字段的消息：该字段不能留空。
此外，当出现验证错误或字段失去焦点它不会变红。

因此，如果该字段为空并且我按下提交按钮，则会显示无效格式消息。

这是架构代码：

const schema = yup.object().shape({
  name: yup
    .string()
    .required("Please enter your name. The field cannot be left blank."),
  date: yup
    .date()
    .transform(parseDateString)
    .typeError("Invalid date format. (mm/dd/yyyy hh:mm am or pm)")
    .nullable()
    .required("Please enter a valid date. The field cannot be left blank.")
});

我尝试将nullable() 移动到每个不同的位置，结果仍然相同。我评论了nullable() 和typeError，我从日期得到默认错误（日期必须是date 类型，但最终值为：Invalid Date。）

Here is a working example

【问题讨论】：

你能解决这个问题吗？如果是，你能在这里发布你的解决方案吗？谢谢！

标签： material-ui react-hook-form yup

【解决方案1】：

Invalid Date 错误来自于 Yup 变换方法中调用的 parseDateString 函数中的 date-fns 解析器函数。

是的 transform 方法用于转换输入字段的传入日期，在本例中是 MUI 的 DateTimePicker。

很遗憾，这与此错误无关，问题出在DatePicker 组件中。记下 TextField 和 {...params} 解构。由于 error 属性在我们解构参数之前就被覆盖了。

Here is a working example.

const CalPicker = ({ helperText, name, label, control, required, error }) => {
  const [value, setValue] = React.useState();
  return (
    <Stack sx={{ mt: 2 }}>
      <LocalizationProvider dateAdapter={DateAdapter}>
        <Controller
          name={name}
          control={control}
          render={({ field }) => (
            <DateTimePicker
              {...field}
              renderInput={(params) => (
                <TextField
                  required={required}
                  {...params}
                  helperText={helperText}
                  error={error}
                />
              )}
              label={label}
              value={value}
              onChange={(newValue) => {
                field.onChange(newValue);
                setValue(newValue);
              }}
            />
          )}
        />
      </LocalizationProvider>
    </Stack>
  );
};

【讨论】：