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"
          label={intl.formatMessage({ id: 'home.user-center.apikey' })}
          rules={[{ required: true, message: intl.formatMessage({ id: 'home.user-center.message.apikey' }) }]}>
          <Input />
        </Form.Item>
        <Form.Item name="name"
          label={intl.formatMessage({ id: 'home.user-center.name' })}
          rules={[{ required: true, message: intl.formatMessage({ id: 'home.user-center.message.name' }) }]}>
          <Input />
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit" >
            {intl.formatMessage({ id: 'home.user-center.operation.save' })}
          </Button>
          <Button htmlType="button" onClick={onReset} style={{ marginLeft: "10px" }}>
            {intl.formatMessage({ id: 'home.user-center.operation.cancel' })}
          </Button>
        </Form.Item>
      </Form>

那么我们在提交的时候，表单就会对表单项定义的规则进行验证，验证通过才会提交表单，然后在onFinish函数中获取数据，然后通过API调用后台接口，保存数据。

如果以这种定义的方式就会出现这种情况：

点击表单的提交按钮，会去校验表单项，

然后看一下获取的值：

const onFinish = (values:object)=>{
    console.log("values",values)
  }

输出没有问题。你也可以通过设置Modal中的footer={null}，来隐藏footer，那么样式也就会变成：

看起来还行，但是总觉得有些别扭。

如果我们不用表单的按钮，而用Modal自带的按钮会不会好点？

看一下修改后的：

<Modal
      destroyOnClose
      title={intl.formatMessage({ id: 'home.user-center.newItem' })}
      visible={modalVisible}
      onCancel={() => onCancel()}
      footer={[
        <Button key='submit' type="primary" htmlType="submit" onClick={onFinish}>
            {intl.formatMessage({ id: 'home.user-center.operation.save' })}
          </Button>,
          <Button key='cancel' htmlType="button" onClick={onReset} style={{ marginLeft: "10px" }}>
            {intl.formatMessage({ id: 'home.user-center.operation.cancel' })}
          </Button>
      ]}
    >
      {/* {props.children} */}
      <Form {...layout} form={form} name="control-hooks">
        <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"
          label={intl.formatMessage({ id: 'home.user-center.apikey' })}
          rules={[{ required: true, message: intl.formatMessage({ id: 'home.user-center.message.apikey' }) }]}>
          <Input />
        </Form.Item>
        <Form.Item name="name"
          label={intl.formatMessage({ id: 'home.user-center.name' })}
          rules={[{ required: true, message: intl.formatMessage({ id: 'home.user-center.message.name' }) }]}>
          <Input />
        </Form.Item>
      </Form>
    </Modal>

我将Form中的提交按钮放到了Modal中footer中，看一下是不是跟我猜想的一样，Modal并无法感知Form中值的变化。

想了想，我可不可以在点击Modal的提交按钮时，能不能让表单去校验一下呢？如果可以的话，就可以解决表单校验的问题了。

const onFinish = (values:object)=>{
    form.validateFields();
    console.log("values",values)
  }

查了一下Form的API，确实有这个方法，去手动调用，然后去检测表单项。

确实可以实现校验功能，但是值好像不是我需要的，如果在这个输出对象中有我的三个参数也不是不行。

但是结果并不乐观，里面并没有我需要的参数。无奈，看来这种方式也是不可取的。那我怎样才能获取参数值呢？

为了寻找解决方案来到了官网查看了一下官方提供的API，突然豁然开朗。

用validateFields出发表单验证，然后他居然是Promise类型的，那我岂不是可以用异步处理的方式来处理了！！！

而且官方也给出了一个例子：

那我直接用异步方式就可以去解决这个问题，于是动手试了一下：

 const onFinish =  async () => {
    const values = await form.validateFields();
    //values
    console.log("values", values);
  };

效果能看得到，确实校验了，并且输出了校验结果

碰到问题的时候，多看一下API文档，会对我们有很大的帮助。我们能碰到的问题，一般官方开发人员也可能碰到。