title: ANTD dynamic form - initial values
body: <p>I have issue with setting initial values for antd dynamic form. Is there any way how to init values in dynamic for. It requires registered field using <code>getFieldDecorator</code>. But for dynamic fields, that field is not registered before.</p>
  
  <p>I am getting this error:
  <code>You cannot set field before registering it.</code></p>
  
  <p>code: <a href="https://codesandbox.io/s/jnx3p1nz5" rel="nofollow noreferrer">https://codesandbox.io/s/jnx3p1nz5</a></p>
  
  <pre><code>import React from "react";
  import { Select, Icon, Button, Form, Input } from "antd";
  
  const FormItem = Form.Item;
  const TextArea = Input.TextArea;
  const Option = Select.Option;
  
  const SELECT = ['opt1', 'opt2'];
  
  class TestForm extends React.Component {
    state = {
      listKeys: [0]
    };
  
    componentDidMount() {
      const {
        form: { setFieldsValue }
      } = this.props;
  
  
      // WORK
      // setFieldsValue({
      //   name: 'test',
      // });
  
      // setFieldsValue({
      //   name: 'test',
      //   list: [
      //     {
      //       sub1: 'test1',
      //       sub2: 'test2',
      //     }
      //   ]
      // });
  
      // !!!!!!!!!!!! NOT WORK
      // setFieldsValue({
      //   name: 'test',
      //   list: [
      //     {
      //       sub1: 'test1',
      //       sub2: 'opt2'
      //     },
      //     {
      //       sub1: 'test11',
      //       sub2: 'opt1'
      //     }
      //   ]
      // });
  
      setFieldsValue({
        name: 'test',
        list: [
          {
            sub1: 'test1',
            sub2: 'opt2',
            opt2sub: 'bla',
          },
          {
            sub1: 'test11',
            sub2: 'opt1'
          },
          {
            sub1: 'test3',
            sub2: 'opt2',
            opt2sub: 'bla',
          },
        ]
      });
    }
  
    remove = k =&gt; {
      const { listKeys } = this.state;
  
      if (listKeys.length === 1) {
        return;
      }
  
      this.setState({
        listKeys: listKeys.filter(key =&gt; key !== k)
      });
    };
  
    add = () =&gt; {
      const { listKeys } = this.state;
  
      this.setState({
        listKeys: [...listKeys, listKeys.length]
      });
    };
  
    render() {
      const {
        form: { getFieldDecorator, getFieldValue }
      } = this.props;
      const { listKeys } = this.state;
  
      return (
        &lt;Form onSubmit={this.handleSubmit}&gt;
          &lt;FormItem label="Name"&gt;
            {getFieldDecorator("name")(&lt;Input placeholder="name" /&gt;)}
          &lt;/FormItem&gt;
          {listKeys.map((key, index) =&gt; {
            const type = getFieldValue(`list[${key}].sub2`);
  
            return (
              &lt;div key={key}&gt;
                &lt;FormItem label="Sub1"&gt;
                  {getFieldDecorator(`list[${key}].sub1`)(
                    &lt;Input placeholder="Sub1" /&gt;
                  )}
                &lt;/FormItem&gt;
                &lt;FormItem label="Sub2"&gt;
                  {getFieldDecorator(`list[${key}].sub2`,{
                    initialValue: 'opt1'
                  })(
                    &lt;Select&gt;
                      {SELECT.map(item =&gt; &lt;Option key={item} value={item}&gt;{item}&lt;/Option&gt; )}
                    &lt;/Select&gt;
                  )}
                &lt;/FormItem&gt;
                {type === 'opt2' &amp;&amp; (
                  &lt;FormItem label="opt2sub"&gt;
                    {getFieldDecorator(`list[${key}].opt2sub`)(
                      &lt;Input placeholder="opt2sub" /&gt;
                    )}
                  &lt;/FormItem&gt;
                )}
                {index &gt; 0 &amp;&amp; (
                  &lt;Icon
                    className="dynamic-delete-button"
                    type="minus-circle-o"
                    onClick={() =&gt; this.remove(key)}
                  /&gt;
                )}
              &lt;/div&gt;
            );
          })}
          &lt;FormItem&gt;
            &lt;Button type="dashed" onClick={this.add}&gt;
              &lt;Icon type="plus" /&gt;Add field
            &lt;/Button&gt;
          &lt;/FormItem&gt;
          &lt;FormItem&gt;
            &lt;Button type="primary" htmlType="submit"&gt;
              Submit
            &lt;/Button&gt;
          &lt;/FormItem&gt;
        &lt;/Form&gt;
      );
    }
  }
  
  export default Form.create()(TestForm);
  </code></pre>