antd.pro中使用Modal嵌套Form实现表单的验证及表单项的值获取

antd.pro是时下很流行的React集成工具，其中包含了，react的核心代码，react路由管理，react的状态管理(dva)，以及umi等适应快速开发的一套完整框架解决方案。

最近接触到antd.pro，使用到Form表单的验证问题。

在前端开发中必不可少的会碰到添加和修改功能。简单的添加/修改功能会在列表页list页面中定义一个Modal，或者以组件的方式创建一个CreateForm，然后在主页面引用。不管哪种方式只要是以Modal的形式展示，那就会牵扯到需要在Modal中嵌入Form表单。

由于antd为我们提供了一套表单验证规则，所以大大地简化了我们的开发。也正是过多依赖表单，导致了我们在碰到这种问题的时候，有点手足无措。

讲一下我碰到的问题：我需要在列表页通过点击"添加"按钮去控制Modal的显示隐藏，这些需要在列表页去做是无可争议的。Modal中需要加入一个Form表单，用于添加一些用户或者其他信息，然后就可以使用Form提供的一些校验方法，这样看起来是挺完美的。但是有一个问题出现了。我们知道Modal的分层一般是，Header头部，content内容区(一般是children也就是你其中定义的任何东西都可以在Modal中通过{children}的方式将内容加载到Modal的content中)，Footer底部(一般定义一些按钮)。

关于Header和content我们都好处理，Header一般用于展示我们的操作及关闭按钮，content就是我们的表单了，而footer就是用于定义我们的一些操作按钮。操作按钮是属于Modal本省的，它是无法感知Form表单的情况。

一般我们在定义表单的时候，习惯的在表单的最后面定义两个按钮，一个提交按钮，一个取消按钮，用于提交表单和取消表单操作，类似这种：

<Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
        <Form.Item name="username"
          label={intl.formatMessage({ id: 'login.username' })}
          rules={[{ required: true, message: intl.formatMessage({ id: 'login.message.username' }) }]}>
          <Input />
        </Form.Item>
        <Form.Item name="apikey"