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: '保定'
    })