Ant Design 表单组件（4.3.1版本）

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

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

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

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

代码：

/* eslint-disable no-template-curly-in-string */
/* eslint-disable no-console */
import React, { useState, useEffect } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { connect, Dispatch } from 'umi';
import { RouteChildrenProps } from 'react-router'
import { Form, Input, Button, InputNumber } from 'antd'

import { StateType } from '../model'
import { CurrentUser } from '../data.d'

const FormItem = Form.Item;

const layout = {
  labelCol: {span: 8},
  wrapperCol: {span: 8},
}
const tailLayout = {
  wrapperCol: {span: 8, offset: 8}
}

const validemessage = {
  required: '${label}是必填项!',
  // required: '${name} 是必填项!', // 显示字段名称，调试的比较方便
  types: {
    email: '${label}不是正确的邮箱格式!',
  },
  number: {
    range: '${label}必须在 ${min} 和 ${max}之间!',
  }
}

const Index = () => {

  const [form] = Form.useForm();
  const [count, setCount] = useState<number>(1);


  const onFinish = values => {
    console.log(values);
  }

  // render() {
    return (
      <PageHeaderWrapper>
        <Form
          form={form}
          {...layout}
          labelAlign="right"
          name="basic"
          scrollToFirstError
          onFinish={onFinish}
          validateMessages={validemessage}
        >
          <FormItem name="name" label="姓名" rules={[{required: true}]}>
            <Input />
          </FormItem>
          <FormItem name="email" label="邮箱" rules={[{type: "email"}]}>
            <Input />
          </FormItem>
          
          <FormItem name="age" label="年龄" rules={[{type: 'number', min: 2, max: 10}]}>
            <InputNumber />
          </FormItem>

          <FormItem {...tailLayout}>
            <Button type="primary" shape="circle" size="large" htmlType="submit">提交</Button>
          </FormItem>

        </Form>
      </PageHeaderWrapper>
    )
  // }
}

export default connect(
  ({
    loading,
    testModel
  }: {
    loading: { effects: { [key: string]: boolean } },
    testModel: StateType
  }) => ({
    currentUser: testModel.currentUser,
    currentUserLoading: loading.effects['testModel/fetchCurrent']
  })
)(Index);

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

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

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

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

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