I have a modal which has a form inside of it. This modal is controlled by its parent. Its parent can open the modal empty for a new form, or it can send data in order to use the same form to edit.
My parent component render is like this:
// current can be empty if the user is not editing the data
// visible control if the modal should be open or not
<TemplateModalCreate
current={current}
onTest={this.handleModalCreateTest}
onSelectType={this.handleGetIndexes}
onSubmit={this.handleModalCreateSubmit}
onClose={this.handleModalCreateClose}
visible={visibleModalCreate}
/>
Inside my modal component, there is a form with validation. And that's where is occurring the error.
I have several Form.Item components like this:
// validating the field date
const dateError = isFieldTouched('date') && getFieldError('date');
// an example of its strucuture
<Form.Item
hasFeedback
help={dateError || ''}
label="Valid date between"
validateStatus={dateError ? 'error' : ''}
>
{
getFieldDecorator('date', {
rules: [{ required: true, message: 'Please choose a date range' }],
initialValue: current.from && [moment(current.from, 'YYYY-MM-DD'), moment(current.to, 'YYYY-MM-DD')],
})(
<RangePicker format="YYYY-MM-DD" />,
)
}
</Form.Item>
Inside componentDidMount, I have the following code to validate the form:
componentDidMount() {
const { form } = this.props;
form.validateFields();
}
When I don't use form.validateFields(), it fills the form correctly for edition, if I use it, it fails to fill the form.
Anyone can tell me if this is a bug or am I doing something wrong here?
I'm working with Ant Design 3.8.2 and React 16.4.1.
UPDATE V1
I have created my example on Code Sandbox to illustrate better the situation. You can check it here https://codesandbox.io/s/2v7q8023xj
To reproduce what's happening, please, follow this:
- Click on any Edit button
- The modal will appear, and the fields won't be filled
- Close the modal
- Click on any Edit button again
- You will see the fields filled