javascript - How to turn field NOT required if it's empty with Ant Design? - Stack Overflow

admin管理员组

文章数量:1426106

I'm making a form separated per sections. Each section have your fields and all are required.

I'm trying to make a validation per section. If all fields per section is empty, ok! The form must turn it not required, but if only one field is filled, all the section must be required.

In other words....

Section 1: Name: "", Email: "", Age: "" ---> no fields filled, not required!

Section 2: Name: "aaa", Email: "", Age: "" ---> One or more fields filled, this section is required!

This is my form:

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

I created an codesandbox for it:

I'm really stucked in it and I don't know how to override the antd form validation to do what I want. Someone can help me?

I'm making a form separated per sections. Each section have your fields and all are required.

I'm trying to make a validation per section. If all fields per section is empty, ok! The form must turn it not required, but if only one field is filled, all the section must be required.

In other words....

Section 1: Name: "", Email: "", Age: "" ---> no fields filled, not required!

Section 2: Name: "aaa", Email: "", Age: "" ---> One or more fields filled, this section is required!

This is my form:

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

I created an codesandbox for it: https://codesandbox.io/s/icy-fog-rdh7m

I'm really stucked in it and I don't know how to override the antd form validation to do what I want. Someone can help me?

• javascript
• reactjs
• validation
• antd

Share Improve this question Follow asked Jul 28, 2020 at 11:26 ZkkZkk 7511515 silver badges3131 bronze badges 1

• If the answer satisfies your request, please vote. – zerocewl Commented Jul 28, 2020 at 19:07

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You can use onValuesChange from antd's Form Api to check if the content of the fields is empty.

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

Then you can pass the result via reacts useState hook to the rules of the form items.

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

Example Form Item:

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

Last but not least, you have to validate the form field on any change:

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

Here is your working CodeSandBox.

---

A good example for dynamic Antd rules can be found int the docs too.

本文标签： javascriptHow to turn field NOT required if it39s empty with Ant DesignStack Overflow