modal and form validation no destory

Version

3.0.0

Environment

mac

Reproduction link

https://user-images.githubusercontent.com/26153901/34207207-75573d12-e5c4-11e7-9a0e-af7932d58aec.gif

Steps to reproduce

According to the official website example add modal

address

repat

1.invoke add function 2.invoke remove function 3.invoke open function 4.input value 5.invoke modal ok function

gif

code

import React, { Component } from 'react';
import { Button, Form, Icon, Input, Modal } from 'antd';

@Form.create()
export default class Home extends React.Component {
  state={
    modalVisible: false,
  }
  open=() => {
    this.setState({ modalVisible: true });
  }
  cancel=() => {
    this.setState({ modalVisible: false });
  }
  ok=() => {
    this.props.form.validateFields((errors) => {
      if (errors) {
        console.log('no pass');
        return;
      }
      console.log('pass');
    });
  }
  remove = () => {
    const { form } = this.props;
    form.setFieldsValue({
      keys: [1],
    });
    console.log('remove two input');
  }
  add = () => {
    const { form } = this.props;
    form.setFieldsValue({
      keys: [1, 2, 3],
    });
    console.log('load three input');
  }

  render() {
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const { modalVisible } = this.state;
    getFieldDecorator('keys', { initialValue: [] });
    const keys = getFieldValue('keys');
    const formItems = keys.map((k) => {
      return (
        <Form.Item required={false} key={k} >
          {getFieldDecorator(`names[${k}]`, {
            rules: [{
              required: true,
              message: "Please input passenger's name or delete this field.",
            }],
          })(
            <Input placeholder="passenger name" />
          )}
        </Form.Item>
      );
    });
    const modalProps = {
      visible: modalVisible,
      onOk: this.ok,
      onCancel: this.cancel,
    };
    return (
      <div>
        <Modal {...modalProps}> {
          <Form layout="horizontal">
            {formItems}
          </Form>
        }
        </Modal>
        <Button type="dashed" onClick={this.add}>
          <Icon type="plus" /> add3
        </Button>
        <Button type="dashed" onClick={this.remove}>
          <Icon type="plus" /> remove2
        </Button>
        <Button type="dashed" onClick={this.open}>
          <Icon type="plus" /> show
        </Button>
      </div>
    );
  }
}

What is expected?

invoke modal ok function after,The first input box and the second input box should be destroyed

What is actually happening?

The first input box and the second input box are not destroyed,It causes validation not to pass

---

How do I destroy the components that I created before?

[afc163]

Try destroyOnClose

[benjycui]

Can you provide an active destroy all form method?

Please provide more details and use cases.