javascript - 为什么所需的检查在日期选择器中不起作用？

Question

当我单击提交按钮时。它没有显示必填错误，因为它是必填字段。这是我的代码。我已经注册了 required 并且还尝试使用规则但仍然没有得到必需的验证

<MuiPickersUtilsProvider utils={DateFnsUtils}>
    <Controller
        as={
            <KeyboardDatePicker
                autoOk
                disableToolbar
                variant="inline"
                format="MM/dd/yyyy"
                id={"appointmentDate"}
                inputVariant="outlined"
                inputRef={register({ required: true })}
                label={"Appointment Date"}
                required={true}
                helperText={errors["appointmentDate"] && "Required..!!"}
                error={errors["appointmentDate"] ? true : false}
                KeyboardButtonProps={{
                    "aria-label": "change date"
                }}
            />
        }
        rules={{ validate: value => value === null || "Required ..!!" }}
        name={"appointmentDate"}
        control={control}
    />
</MuiPickersUtilsProvider>

https://codesandbox.io/s/mui-autocomplete-with-react-hook-form-1p3x5

Answer 1

这是固定代码

        <Controller
          as={
            <KeyboardDatePicker
              autoOk
              disableToolbar
              variant="inline"
              format="MM/dd/yyyy"
              id={"appointmentDate"}
              //  inputRef={register({ required: true })}  // not required remove this
              inputVariant="outlined"
              label={"Appointment Date"}
              required={true}
              helperText={errors["appointmentDate"] && "Required..!!"}
              error={errors["appointmentDate"] ? true : false}
              KeyboardButtonProps={{
                "aria-label": "change date"
              }}
            />
          }
          // rules={{ validate: value => value === null || "Required ..!!" }} // change this like below
          rules={{ required: true }}
          name="appointmentDate"
          control={control}
        />

https://codesandbox.io/s/mui-autocomplete-with-react-hook-form-iymgr