Ant Design component initialValue is not working with validateFields

Viewed 2778

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:

  1. Click on any Edit button
  2. The modal will appear, and the fields won't be filled
  3. Close the modal
  4. Click on any Edit button again
  5. You will see the fields filled
0 Answers
Related