antd design（4.x）中的Form

1.初始化表单数据

initialValues：表单默认值，只有初始化以及重置时生效。
代码示例如下：

 <Form layout="horizontal" form={form}
    initialValues={{
         RealName: userInfo.RealName,
         Sex: userInfo.Sex,
         Mobile: userInfo.Mobile,
         Email: userInfo.Email,
         Birthday: moment(userInfo.Birthday, 'YYYY-MM-DD'),
     }}>
     <FormItem name="RealName" label="暱称" {...Common.layout.formItemLayout}>
         <Input />
     </FormItem>
     <FormItem name="Sex" label="性别" {...Common.layout.formItemLayout}>
         <Radio.Group onChange={onChange} value={sexValue}>
             <Radio value={1}>男</Radio>
             <Radio value={0}>女</Radio>
         </Radio.Group>
     </FormItem>
     <FormItem name="Birthday" label="生日" {...Common.layout.formItemLayout}>
         <DatePicker />
     </FormItem>
     <FormItem name="Email" label="邮箱" {...Common.layout.formItemLayout}>
         <Input />
     </FormItem>
     <FormItem name="Mobile" label="电话" {...Common.layout.formItemLayout}>
         <Input />
     </FormItem>
 </Form>

2.form验证
form ：经 Form.useForm() 创建的 form 控制实例，不提供时会自动创建

const [form] = Form.useForm();

使用form={form}

 <Form layout="horizontal" form={form}>
     <Form.Item name='name' label='名称'
      	rules={[{ required: true, message: '必填', }]}
      >
          <Input />
      </Form.Item>

      <Form.Item name='desc' label='描述'
          rules={[{ required: true, message: '必填', }]}
      >
          <Input />
      </Form.Item>
 </Form>

提交时的校验

   form.validateFields()
     .then(values => {
     	// success         
          console.log(values)
      })
      .catch(errorInfo => { // error
          console.log(errorInfo)
      });

3.动态添加表单的值

 form.setFieldsValue({
     name: '测试',
     desc: '测试自动填充',
 });