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: '測試自動填充',
 });