当在反应钩子表单中选中复选框为真时，如何要求日期输入字段？

Question

假设我有一个复选框，它不是必填字段。如果用户选中它，将显示日期输入字段。日期字段是必需的，并且日期必须是过去的日期。如果用户取消选中该复选框，则日期字段将不是必填字段。当用户提交表单时不会显示任何错误。并将提交表格。我正在使用react-hook-form版本“^7.43.9”。

I have tried to do this like this. it's working fine but it's givinig me initially error when  i give defaultValue="" and it's giving me date field is required when I checked the checkbox then did not select any date and unchecked the checkbox. Where as i want date field will be required only when checkbox is checked true, if user unchecked checkbox , date will be not required.


const validationSchema = yup.object().shape({
  roofDate: yup
    .date()
    .typeError("Please enter a valid date")
    .max(
      new Date(Date.now() - 86400000),
      "Date can not be future or current date"
    )
    .when("roofCheck", {
      is: true,
      then: yup.date().required("Roof date is required"),
    })})

                  <div className="col-md-6 col-lg-3">
                    <div className="mb-3">
                      <label className="brand-label d-grid">
                        <div className="form-check form-check-inline">
                          <input
                            className="form-check-input"
                            type="checkbox"
                            id="roofCheck"
                            name="roofCheck"
                            value="Roof"
                            {...register("roofCheck")}
                          />
                          <label
                            className="form-check-label"
                            htmlFor="roofCheck"
                          >
                            Is Roof Updated?
                          </label>
                        </div>
                      </label>

                      {watch("roofCheck") && (
                        <>
                          <input
                            type="date"
                            id="roofDate"
                            className="form-control"
                            rules={{ required: "Date is required" }}
                            placeholder="Enter Roof Date"
                            {...register("roofDate")}
                          />
                        </>
                      )}
                      {errors.roofDate && (
                        <p className="text-danger">
                          {errors.roofDate?.message}
                        </p>
                      )}
                    </div>
                  </div>

Answer 1

要实现仅在选中复选框时才需要日期字段的所需行为，您需要对代码进行一些调整。具体来说，您应该根据复选框的状态有条件地应用验证规则。这是使用 React Hook Form 的方法，是的：

import React from "react";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

const validationSchema = yup.object().shape({
  roofDate: yup.date()
    .typeError("Please enter a valid date")
    .max(new Date(Date.now() - 86400000), "Date cannot be future or current date"),
  roofCheck: yup.boolean(),
});

function App() {
  const { handleSubmit, control, errors, watch } = useForm({
    resolver: yupResolver(validationSchema),
  });

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="col-md-6 col-lg-3">
        <div className="mb-3">
          <label className="brand-label d-grid">
            <div className="form-check form-check-inline">
              <Controller
                name="roofCheck"
                control={control}
                defaultValue={false} // Set the default value to false
                render={({ field }) => (
                  <input
                    className="form-check-input"
                    type="checkbox"
                    {...field}
                  />
                )}
              />
              <label className="form-check-label">Is Roof Updated?</label>
            </div>
          </label>

          {watch("roofCheck") && (
            <>
              <Controller
                name="roofDate"
                control={control}
                render={({ field }) => (
                  <input
                    type="date"
                    id="roofDate"
                    className="form-control"
                    placeholder="Enter Roof Date"
                    {...field}
                  />
                )}
              />
            </>
          )}

          {errors.roofDate && (
            <p className="text-danger">{errors.roofDate.message}</p>
          )}
        </div>
      </div>

      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

注意要点：

我添加了控制器组件来管理复选框和日期输入字段。这允许您控制表单中这些字段的行为。

我将屋顶检查的默认值设置为 false，因此最初，该复选框将被取消选中，并且不需要日期字段。

验证模式现在基于复选框状态。如果选中该复选框（roofCheck 为 true），则 rootDate 字段将接受验证。如果未选中，则不需要 rootDate 字段。

通过这些调整，仅当选中该复选框时才需要日期字段，并且在加载表单时不会遇到初始错误。