title: How to set multiple FormItems under Form.List in antd V4
body: <p>Single FormItem Demo in antd:<a href="https://ant.design/components/form/#components-form-demo-dynamic-form-item" rel="nofollow noreferrer">https://ant.design/components/form/#components-form-demo-dynamic-form-item</a>. There only one FormItem generated dynamically everytime.</p>
  <p>And, here is <img src="https://i.stack.imgur.com/BEIc0.png" alt="What I want to achieve." /></p>
  <p>But I always got some errors like wrong interaction, wrong validation or wrong form value.</p>
  <p>My code:</p>
  <pre><code>&lt;Form.List name=&quot;passenger&quot;&gt;
      {(fields, { add, remove }) =&gt; {
        return (
          &lt;div&gt;
            {fields.map((field, index) =&gt; (
              &lt;Form.Item
                {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
                label={index === 0 ? 'Passengers' : ''}
                required={false}
                key={field.key}
              &gt;
                &lt;Form.Item
                  {...field}
                  validateTrigger={['onChange', 'onBlur']}
                  rules={[
                    {
                      required: true,
                      whitespace: true,
                      message: &quot;Please input passenger's name or delete this field.&quot;,
                    },
                  ]}
                  noStyle
                &gt;
                  &lt;Input placeholder=&quot;passenger name&quot; style={{ width: '40%' }} /&gt;
                &lt;/Form.Item&gt;
  
                &lt;Form.Item
                  name={['age', index]}
                  validateTrigger={['onChange', 'onBlur']}
                  rules={[
                    {
                      required: true,
                      whitespace: true,
                      message: &quot;Please input passenger's age or delete this field.&quot;,
                    },
                  ]}
                  noStyle
                &gt;
                  &lt;Input placeholder=&quot;passenger age&quot; style={{ width: '40%', marginRight: 8 }} /&gt;
                &lt;/Form.Item&gt;
  
                {fields.length &gt; 1 ? (
                  &lt;MinusCircleOutlined
                    className=&quot;dynamic-delete-button&quot;
                    onClick={() =&gt; {
                      remove(field.name);
                    }}
                  /&gt;
                ) : null}
              &lt;/Form.Item&gt;
            ))}
            &lt;Form.Item&gt;
              &lt;Button
                type=&quot;dashed&quot;
                onClick={() =&gt; {
                  add();
                }}
                style={{ width: '60%' }}
              &gt;
                &lt;PlusOutlined /&gt; Add field
              &lt;/Button&gt;
            &lt;/Form.Item&gt;
          &lt;/div&gt;
        );
      }}
    &lt;/Form.List&gt;
  </code></pre>