使用反应钩子形式进行条件验证

Question

这是我的表单和CodeSanbox 的样子。目前我正在使用 react-hook-form，
因为您可以看到表单有 3 个输入。在输入所有必填字段之前，应禁用提交按钮。两个用例：

1. 如果未选中“检查”：
   • 只有“id”应该被验证并且提交按钮应该被启用。“第一个”和“姓氏”名称不应是表单数据的一部分
2. 如果选中“检查”
   • 所有字段都应验证
     名字，只有在选中“检查”时才需要姓氏。所以它没有被检查然后表单应该只验证“ID”字段。如果选中“检查”，则所有字段都应得到验证。

我遇到的问题是，如果我输入 id，表单状态仍然是“无效”。表单需要输入名字和姓氏的值。
我将不胜感激任何帮助。

Answer 1

整个验证行为（UX）肯定会让事情变得更加困难，但是，您应该从库中利用一些东西，例如：

• watch
• validate
• getValues

import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";

import "./index.css";

function App() {
  const {
    register,
    handleSubmit,
    errors,
    formState: { isValid, touched },
    getValues,
    trigger,
    watch
  } = useForm({
    mode: "onBlur"
  });
  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };
  const validate = (value) => {
    if (getValues("name")) { // read the checkbox value
      return !!value;
    }

    return true;
  };
  const isChecked = watch("name"); // watch if the name is checked

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="id">ID</label>
      <input
        name="id"
        placeholder="id"
        ref={register({ required: true, maxLength: 50 })}
      />
      {errors.id && <p>"ID is required"</p>}

      <fieldset disabled={!isChecked}>
        <legend>
          <input
            type="checkbox"
            name={"name"}
            ref={register}
            onChange={() => trigger()} // you want update isValid due to state change, and also those extra two inputs become required
          />
          <span>Check</span>
        </legend>
        <label htmlFor="firstName">First Name</label>
        <input
          name="firstName"
          placeholder="Bill"
          ref={register({
            validate
          })}
        />
        // make sure input is touched before fire an error message to the user
        {errors.firstName && touched["firstName"] && (
          <p>"First name is required"</p>
        )}
        <label htmlFor="lastName">Last Name</label>
        <input
          name="lastName"
          placeholder="Luo"
          ref={register({
            validate
          })}
        />
        {errors.lastName && touched["lastName"] && (
          <p>"Last name is required"</p>
        )}
      </fieldset>

      <input type="submit" disabled={!isValid} />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

CSB： https://codesandbox.io/s/react-hook-form-conditional-fields-forked-n0jig? file=/src/index.js:0-1831

Answer 2

我已经更新了您的 CodeSanBox 代码并在此处添加了完整代码：

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";

import "./index.css";

function App() {
  const {
    register,
    handleSubmit,
    errors,
    formState,
    unregister,
    setValue,
    getValues,
    reset
  } = useForm({
    mode: "onBlur",
    reValidateMode: "onBlur",
    shouldUnregister: true
  });
  //console.log(formState.isValid);
  console.log(errors);
  const [disabled, setDisabled] = useState(true);
  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };
  useEffect(() => {
    // @ts-ignore

    if (disabled) {
      console.log("unregister");
      reset({ ...getValues(), firstName: undefined, lastName: undefined });
      unregister(["firstName", "lastName"]);
    } else {
      console.log("register");
      register("firstName", { required: true });
      register("lastName", { required: true });
    }
  }, [disabled]);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="id">ID</label>
      <input
        name="id"
        placeholder="id"
        ref={register({ required: true, maxLength: 50 })}
      />
      {errors.id && <p>"ID is required"</p>}
      <fieldset disabled={disabled}>
        <legend>
          <input
            type="checkbox"
            name={"name"}
            ref={register}
            onClick={() => setDisabled(!disabled)}
          />
          <span>Check</span>
        </legend>
        <label htmlFor="firstName">First Name</label>
        <input
          name="firstName"
          placeholder="Bill"
          onChange={(e) => {
            console.log(e.target.value);
            setValue("firstName", e.target.value);
          }}
          ref={register({ required: !disabled })}
        />
        {errors.firstName && <p>"First name is required"</p>}
        <label htmlFor="lastName">Last Name</label>
        <input
          name="lastName"
          placeholder="Luo"
          onChange={(e) => setValue("lastName", e.target.value)}
          ref={register({ required: !disabled })}
        />
        {errors.lastName && <p>"Last name is required"</p>}
      </fieldset>

      <input type="submit" disabled={!formState.isValid} />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

首先，我发现您将disabledstate设置为falsewhich should be trueas an initial value，关于这个问题，我在state 更改时使用了reset和getValues函数disabled。

编辑让您轻松识别代码更改，我已在 CodeSanBox 恢复了所有代码。