Ant Design is specially created for in-house computer applications, committed to user experience and product designers. User experience designers and interface designers are collectively known as product designers, Ant Design will erase the boundaries between product management, interaction design, visual design, interface development and manage user data. It is because of such benefits that more and more people are using it. However, there are still quite a few problems that occur during use. Our today’s article will give you solutions when faced with a situation “Antd 4 Checkbox doesn’t have value after form submit”.

When does the error “Antd 4 Checkbox doesn’t have value after form submit” occur?

const Example = ({ initialValues, onSave }) => {
  const [form] = Form.useForm();

  useEffect(() => {
    form.resetFields();
  }, [initialValues.isAccepted]);

  const onFinish = (values) => {
    console.log(values);
    onSave(values);
  };

  const getInitialValues = useCallback(() => ({
    isAccepted: initialValues.isAccepted || false,
  }));

  return (
    <Form form={form} onFinish={onFinish} initialValues={getInitialValues()}>
      <Form.Item name="isAccepted">
        <Checkbox>The company can use my data</Checkbox>
      </Form.Item>
      <Button type="primary" htmlType="submit">Save</Button>
    </Form>
  );
};

The above is an example where a user is using an Ant Design 4 form and has set up a checkbox. The end result they want is to get the initial value that was set to inititalValues and onFinish to return the current value.

However, during the run the error “Antd 4 Checkbox doesn’t have value after form submit” occurs.

Solving the error “Antd 4 Checkbox doesn’t have value after form submit”

To handle the situation you are facing, in the Form.Item tag set valuePropName=”checked” like this:

<Form.Item name="isAccepted" valuePropName="checked">

In this situation you need to note, the checkbox will not store the value, instead, if you want to set the property, you need to declare it in Form.item. To do so you can use Prop “valuePropName”. You can understand Prop as follows:

Props is considered as one of the ways to help pass data from parent components down to child components. If you pass data through Props, the child component can only be read, not change the data. Thanks to this, the component can be used anywhere and it will always display with an output if it has the same input value. This is what will help us control the Component more easily.

Forms are used to gather, verify, and submit user information. Typical form components include checkboxes, radio buttons, input fields, and pick boxes. Form.Item /> is used to define a form field.

The elements that make up your form are called form items. Our form item kinds and their descriptions are listed below. Unless otherwise stated, each form item counts as one item toward your form’s limit on Items per Form.

Syntax:

<Form.Item {...props}>{children}</Form.Item>

So, in this situation, once declared in the Form.Item, the values or other properties will be received by the form panel and passed to the form for it to process here.

Conclusion

To summarize, above we have come up with a solution to help you deal with the problem “Antd 4 Checkbox doesn’t have value after form submit“. We hope this blog has helped clear the air around how to do it. If you have more questions about this topic, please leave a comment below. Thank you for reading; we are always excited when one of our posts can provide useful information on a topic like this!