React - Ant Design, Form with getFieldDecorator and initialValue not working in single chechbox

Question

I'm creating a Form with Ant Design, I have a problem when I try to use getFieldDecorator with initialValue in a single checkbox.

The initialValue doesn't match correctly with the value of checkbox, here's an example.

Form {...formItemLayout} onSubmit={this.handleSubmit}>
    <Form.Item label="Checkbox">
      {getFieldDecorator("checkbox-1", {
        initialValue: "A"
      })(<Checkbox value="A">A</Checkbox>)}
    </Form.Item>

    <Form.Item label="Checkbox">
      {getFieldDecorator("checkbox-2", {
        initialValue: true,
        valuePropName: "checked"
      })(<Checkbox>A</Checkbox>)}
    </Form.Item>
  </Form>

In this case the checkbox-1 at the beginning it should be checked because the initialValue is the same as the checkbox value, but instead it isn't checked.

What is my mistake?

I also insert the link with the code: https://codesandbox.io/s/strange-driscoll-tehx4

Answer 1

The valuePropName: 'checked' is restricted to checkboxes. See below:

<Form.Item>
   {getFieldDecorator('propname', {
      valuePropName: 'checked'
   })(
      <Checkbox>Checkbox Text</Checkbox> 
   )}
</Form.Item>

Don't set defaultChecked as this can interfere with the value, because it's set on the checkbox itself.

If the binding doesn't work automatically, use mapPropsToFields to specify the binding yourself. See a full example below:

const BuildingCRUD = Form.create({
  name: "organisation_form",
  mapPropsToFields(props) {
    return {
      name: Form.createFormField({
        value: props.name,
      }),
      address: Form.createFormField({
        value: props.address,
      }),
      numberOfApartments: Form.createFormField({
        value: props.numberOfApartments,
      }),
      postcode: Form.createFormField({
        value: props.postcode,
      }),
      parking: Form.createFormField({
        value: props.parking,
      }),
      id: Form.createFormField({
        value: props.id,
      }),
    };
  },
})((props) => {
  const { getFieldDecorator } = props.form;

  return (
    <Form style={{ maxWidth: "320px" }} onSubmit={handleSubmit}>
      <Form.Item label="Name">
        {getFieldDecorator("name", {
          rules: [{ required: true, message: "Building name is required" }],
        })(
          <Input
            prefix={
              <Icon type="profile" style={{ color: "rgba(0,0,0,.25)" }} />
            }
            placeholder="Company name"
          />
        )}
      </Form.Item>

      <Form.Item>
        {getFieldDecorator("address", {
          rules: [{ required: true, message: "Building address is required" }],
        })(
          <Input
            prefix={<Icon type="mail" style={{ color: "rgba(0,0,0,.25)" }} />}
            placeholder="Address"
          />
        )}
      </Form.Item>

      <Form.Item>
        {getFieldDecorator("postcode", {
          rules: [{ required: true, message: "Building postcode is required" }],
        })(
          <Input
            prefix={<Icon type="mail" style={{ color: "rgba(0,0,0,.25)" }} />}
            placeholder="Postcode"
          />
        )}
      </Form.Item>

      <Form.Item>
        {getFieldDecorator("parking", {
          valuePropName: "checked",
        })(<Checkbox>Available Parking</Checkbox>)}
      </Form.Item>
    </Form>
  );
});

export default BuildingCRUD;

Answer 2

On using getFieldDecorator API, initialValue will override the value property on given component.

options.initialValue - You can specify initial value, type, optional value of children node. (Note: Because Form will test equality with === internally, we recommend to use variable as initialValue, instead of literal)

But in your case, Checkbox doesn't has value property.

Instead, you need to use valuePropName and specify the initialValue property.

options.valuePropName - Props of children node, for example, the prop of Switch is 'checked'.

Therefore initialValue: "A" has no meaning, it may be true if you used for example Select component.

Moreover you can use props or state for initial value like initialCheckBoxValue:

class Demo extends React.Component {
  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <FlexBox>
        <Form>
          <Form.Item label="Checkbox">
            {getFieldDecorator('Select', {
              initialValue: 'B'
            })(
              <Select>
                <Select.Option value="A">A</Select.Option>
                <Select.Option value="B">B</Select.Option>
              </Select>
            )}
          </Form.Item>

          <Form.Item label="Checkbox A">
            {getFieldDecorator('checkbox-1', {
              initialValue: this.props.initialCheckBoxValue,
              valuePropName: 'checked'
            })(<Checkbox>A</Checkbox>)}
          </Form.Item>

          <Form.Item label="Checkbox B">
            {getFieldDecorator('checkbox-2', {
              initialValue: true,
              valuePropName: 'checked'
            })(<Checkbox>B</Checkbox>)}
          </Form.Item>
        </Form>
      </FlexBox>
    );
  }
}

const DemoForm = Form.create()(Demo);

ReactDOM.render(
  <DemoForm initialCheckBoxValue={false} />,
  document.getElementById('root')
);