如果 Ant Design 为空，如何将不需要的字段转为空？答案

【问题标题】：How to turn field NOT required if it's empty with Ant Design?如果 Ant Design 为空，如何将不需要的字段转为空？
【发布时间】：2020-07-28 11:26:30
【问题描述】：

我正在制作一个按部分分隔的表格。每个部分都有您的字段，并且都是必需的。

我正在尝试对每个部分进行验证。如果每个部分的所有字段都是空的，好的！表格必须转为非必填，但如果只填写一个字段，则所有部分都必须填写。

换句话说....

第 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"
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name={["otherItem", "age"]}
          label="Age"
          rules={[
            {
              required: true,
              type: "number"
            }
          ]}
        >
          <InputNumber />
        </Form.Item>
      </div>

      <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

我为它创建了一个代码框：https://codesandbox.io/s/icy-fog-rdh7m

我真的陷入了困境，我不知道如何覆盖antd 表单验证来做我想做的事。有人可以帮助我吗？

【问题讨论】：

如果答案满足您的要求，请vote。

标签： javascript reactjs validation antd

【解决方案1】：

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

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);
  };

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

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

示例表单项：

       <Form.Item
          name={["user", "name"]}
          label="Name"
          rules={[
            {
              required: userRequired
            }
          ]}
        >

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

  useEffect(() => {
    form.validateFields();
  });

这是你的工作CodeSandBox。

一个好的example for dynamic Antd rules 也可以在文档中找到。

【讨论】：