如果 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) => {&nbsp; &nbsp; const anyUser = allValues.user&nbsp; &nbsp; &nbsp; ? Object.values(allValues.user).filter(Boolean).length > 0&nbsp; &nbsp; &nbsp; : false;&nbsp; &nbsp; setUserRequired(anyUser);&nbsp; &nbsp; const anyOtherItem = allValues.otherItem&nbsp; &nbsp; &nbsp; ? Object.values(allValues.otherItem).filter(Boolean).length > 0&nbsp; &nbsp; &nbsp; : false;&nbsp; &nbsp; setOtherItemRequired(anyOtherItem);&nbsp; };useState然后您可以通过 reacts钩子将结果传递给rules表单项。const [userRequired, setUserRequired] = useState(false);示例表单项：&nbsp; &nbsp; &nbsp; &nbsp;<Form.Item&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name={["user", "name"]}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label="Name"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rules={[&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; required: userRequired&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]}&nbsp; &nbsp; &nbsp; &nbsp; >最后但同样重要的是，您必须在任何更改时验证表单字段：&nbsp; useEffect(() => {&nbsp; &nbsp; form.validateFields();&nbsp; });这是您的工作CodeSandBox。也可以在文档中找到动态 Antd 规则的一个很好的示例。