Antdesign Form realize the assignment page is loaded controls

When using Antdesign Form, when the page loads, you need to get data from the background, the default assignment for the Form control. Seems relatively simple needs, but Antdesign official documents is also a corresponding introduction, then a default value for the Form CheckBox loaded, the document was not involved.

Demand: When the page record, gets the current value of the Form object from the background, and then loads the value into the control. As shown below,

 

Form space is defined as follows, in case the official website to create an object using Form.create method, mapPropsToFields method completes the assignment of space, for Input, Select and other controls is not in question, and for the checkbox control will not enter into force.

<FormItem label="Primary Keys" hasFeedback>
    {getFieldDecorator('primayKey', {rules: [{ required: true, message: 'Please Input Primay Key!' }],})(
   <Input placeholder="Please Input Primay Key" />)}
</FormItem>
<FormItem {...tailFormItemLayout}>
    {getFieldDecorator('isIgnoreFirstRow')(
      <Checkbox >Ignore First Row</Checkbox>
    )}
</FormItem>

const ingform = Form.create({ 
    name: 'ingestion_form' ,
    mapPropsToFields(props) {
        return {
            primayKey:Form.createFormField({
                ...props.stepObj,
                value:props.stepObj.paramMap.source_primary_keys
            }),
            ignoreFirstRow:Form.createFormField({
                ...props.stepObj,
                 value:props.stepObj.paramMap.source_is_ignore_first
            })

        }
    }
})(IngestionForm);

 

Look at some of the source code, we can easily find, in fact, we have some source code description thereof.

 

So will the code on Checkbox slightly modified, and deleted mapPropsToFields method defined Checkbox filed snippet can work normally, but get the field in the form of methods and other controls remain the same.

<FormItem {...tailFormItemLayout}>
                        {getFieldDecorator('isIgnoreFirstRow',{ 
                            valuePropName: 'checked',initialValue:stepObj.paramMap.source_is_ignore_first || false, })(
                        <Checkbox >Ignore First Row</Checkbox>
                        )}
</FormItem>