Ant Design 表单组件（4.3.1版本）

有阵子没有使用Ant，前几天使用发现已经到了4.3了。

Form表单组件一直是很常用的组件。使用过程中的注意项，记录笔记留痕。（仅添加相关的代码）

1、validatemessages 属性（验证提示模板）。

　　要想使用 validatemessages 生效，首先要给 FormItem 配置上相关规则。

代码：

 1 /* eslint-disable no-template-curly-in-string */
 2 /* eslint-disable no-console */
 3 import React, { useState, useEffect } from 'react'
 4 import { PageHeaderWrapper } from '@ant-design/pro-layout'
 5 import { connect, Dispatch } from 'umi';
 6 import { RouteChildrenProps } from 'react-router'
 7 import { Form, Input, Button, InputNumber } from 'antd'
 8 
 9 import { StateType } from '../model'
10 import { CurrentUser } from '../data.d'
11 
12 const FormItem = Form.Item;
13 
14 const layout = {
15   labelCol: {span: 8},
16   wrapperCol: {span: 8},
17 }
18 const tailLayout = {
19   wrapperCol: {span: 8, offset: 8}
20 }
21 
22 const validemessage = {
23   required: '${label}是必填项!',
24   // required: '${name} 是必填项!', // 显示字段名称，调试的比较方便
25   types: {
26     email: '${label}不是正确的邮箱格式!',
27   },
28   number: {
29     range: '${label}必须在 ${min} 和 ${max}之间!',
30   }
31 }
32 
33 const Index = () => {
34 
35   const [form] = Form.useForm();
36   const [count, setCount] = useState<number>(1);
37 
38 
39   const onFinish = values => {
40     console.log(values);
41   }
42 
43   // render() {
44     return (
45       <PageHeaderWrapper>
46         <Form
47           form={form}
48           {...layout}
49           labelAlign="right"
50           name="basic"
51           scrollToFirstError
52           onFinish={onFinish}
53           validateMessages={validemessage}
54         >
55           <FormItem name="name" label="姓名" rules={[{required: true}]}>
56             <Input />
57           </FormItem>
58           <FormItem name="email" label="邮箱" rules={[{type: "email"}]}>
59             <Input />
60           </FormItem>
61           
62           <FormItem name="age" label="年龄" rules={[{type: 'number', min: 2, max: 10}]}>
63             <InputNumber />
64           </FormItem>
65 
66           <FormItem {...tailLayout}>
67             <Button type="primary" shape="circle" size="large" htmlType="submit">提交</Button>
68           </FormItem>
69 
70         </Form>
71       </PageHeaderWrapper>
72     )
73   // }
74 }
75 
76 export default connect(
77   ({
78     loading,
79     testModel
80   }: {
81     loading: { effects: { [key: string]: boolean } },
82     testModel: StateType
83   }) => ({
84     currentUser: testModel.currentUser,
85     currentUserLoading: loading.effects['testModel/fetchCurrent']
86   })
87 )(Index);

2、initialValues 属性，给表单赋初始值。重置表单时也会生效。

3、form 属性，利用 Form.useForm()，创建，作为实例对象。

　　可以使用后续的方法，比如：

    form.resetFields(); // 回到初始状态，有初始值会赋初始值    

    form.setFieldsValue({
      name: '谷中',
      password: "haha",
      address: '保定'
    })