如果 Ant Design 为空，如何将字段变为 NOT required？

Question

我正在制作一个按部分分开的表格。每个部分都有您的字段，所有字段都是必需的。我正在尝试对每个部分进行验证。如果每个部分的所有字段都是空的，好吧！表格必须把它变成非必填项，但如果只填写一个字段，则所有部分都必须是必填项。换句话说....第 1 部分：姓名：“”，电子邮件：“”，年龄：“” ---> 没有字段填写，不是必需的！Section 2: Name: "aaa", Email: "", Age: "" --->填写一个或多个字段，此部分为必填项！这是我的表格：const layout = {  labelCol: {    span: 8  },  wrapperCol: {    span: 16  }};const validateMessages = {  required: "${label} is required!"};const Demo = () => {  const onFinish = values => {    console.log(values);  };  return (    <Form      {...layout}      name="nest-messages"      onFinish={onFinish}      validateMessages={validateMessages}    >      <div class="section1">        <p> SECTIOOON 1</p>        <Form.Item          name={["user", "name"]}          label="Name"          rules={[            {              required: true            }          ]}        >          <Input />        </Form.Item>        <Form.Item          name={["user", "email"]}          label="Email"          rules={[            {              required: true,              type: "email"            }          ]}        >          <Input />        </Form.Item>        <Form.Item          name={["user", "age"]}          label="Age"          rules={[            {              required: true,              type: "number"            }          ]}        >          <InputNumber />        </Form.Item>      </div>      <div class="section2">        <p> SECTIOOON 2</p>        <Form.Item          name={["otherItem", "name"]}          label="Name"          rules={[            {              required: true            }          ]}        >          <Input />        </Form.Item>        <Form.Item          name={["otherItem", "email"]}          label="Email"          rules={[            {              required: true,              type: "email"            }          ]}      };我为它创建了一个codesandbox：https ://codesandbox.io/s/icy-fog-rdh7m我真的陷入其中，我不知道如何覆盖antd表单验证来做我想做的事。有人可以帮助我吗？

Answer 1

你可以使用onValuesChange来自 antd 的Form Api来检查字段内容是否为空。

const onValuesChange = (changedValues, allValues) => {

    const anyUser = allValues.user

      ? Object.values(allValues.user).filter(Boolean).length > 0

      : false;

    setUserRequired(anyUser);

    const anyOtherItem = allValues.otherItem

      ? Object.values(allValues.otherItem).filter(Boolean).length > 0

      : false;

    setOtherItemRequired(anyOtherItem);

  };

useState然后您可以通过 reacts钩子将结果传递给rules表单项。

const [userRequired, setUserRequired] = useState(false);

示例表单项：

       <Form.Item

          name={["user", "name"]}

          label="Name"

          rules={[

            {

              required: userRequired

            }

          ]}

        >

最后但同样重要的是，您必须在任何更改时验证表单字段：

  useEffect(() => {

    form.validateFields();

  });

这是您的工作CodeSandBox。

---

也可以在文档中找到动态 Antd 规则的一个很好的示例。