CODEWITHSUNDEEP
javascriptreactjsantd
CJH
CJH

Reputation: 1594

ant design - Update checked value of a checkbox inside a Form.Item using Form.setFieldsValue

I have a React Form component that receives a state object. The Form contains a couple of Form.Item components, one antd Input & one antd Checkbox. I have the following code in my Form component:

const RecordsForm = ({ selectedRecord, recordComponentForm }) => {
  useEffect(() => {
    debugger;
    recordComponentForm.setFieldsValue({
      Title: selectedRecord ? selectedRecord.Title : null,
      IsCurrentRecord: selectedRecord ? selectedRecord.IsCurrentRecord : true,
    });
  }, [recordComponentForm, selectedRecord]);

  return (
    <Form
      name="seasonForm"
      autoComplete="off"
      layout={"inline"}
      form={recordComponentForm}
    >
      <Form.Item
        label="Title"
        name="Title"
        rules={[{ required: true, message: "Add a Title" }]}
      >
        <Input
          name="Title"
          placeholder="Season Title"
        />
      </Form.Item>

      <Form.Item
        label="Is Active Record"
        name="IsCurrentRecord"
        valuePropName="checked"
      >
        <Checkbox name="IsCurrentRecord" />
      </Form.Item>
    </Form>
  );
};

export default RecordsForm;

where the supplied prop recordComponentForm is instantiated in the parent component: const [recordComponentForm] = Form.useForm();

When I run the application and force this component to reload with a new selectedRecord, I want the Form.Item Input value to change to the Title from the object and the Checkbox to reflect the IsCurrentRecord boolean value of the object. The object passed in looks like this:

enter image description here

The Title Input value changes to show the Title of the object, however the checkbox remains unchanged:

enter image description here

I would like the checkbox to change it's checked value depending on what comes in on the selectedRecord.IsCurrentRecord object in the same way the Title does. Any advice would be greatly appreciated.

Upvotes: 0

Views: 7897

Answers (3)

David Tran
David Tran

Reputation: 41

You can use



<Checkbox name="IsCurrentRecord" checked={Form.useWatch("IsCurrentRecord", form)} />

Upvotes: 0

Takuya Matsuda
Takuya Matsuda

Reputation: 93

Maybe.. just simply remove name from Checkbox.

<Form.Item
  label="Is Active Record"
  name="IsCurrentRecord"
  valuePropName="checked"
  >
  <Checkbox />
</Form.Item>

Checkbox usually return a value of choices (not boolean), so you perhaps should use Switch component instead. But by using valuePropName="checked", we could get boolean from Checkbox.

Upvotes: 5

CJH
CJH

Reputation: 1594

This was simply a case of the Form.Items sharing the same name and the child component it contains. Once I renamed the Form.Item for the Checkbox to something like IsCurrentRecord_FI and referred to it as such, it started working.

Upvotes: 0

Related Questions