FQForm 表单

介绍

高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。

用法

基本引入

import { FQForm } from '@fq/fq-weapp-ui';

组件依赖的样式文件（仅按需引用时需要）

import '@fq/fq-weapp-ui/dist/styles/components/form.scss';

基础用法

<FQForm>
  <FQForm.Item>
    // 输入控件
  </FQForm.Item>
</FQForm>

基础使用

<FQForm>
  <FQForm.Item
    name="fieldA"
    label="Field A"
    extra='这是一条额外的提示信息'
    required
    rules={[{ required: true }]}
  >
    <FQInput placeholder="Input street" />
  </FQForm.Item>
  <FQForm.Item
    name="fieldB"
    label="Field B"
    help='这是一条提示信息，会被校验规则覆盖'
    required
    rules={[{ required: true }]}
  >
    <FQRadio.Group options={options} />
  </FQForm.Item>
  <FQForm.Item
    name="fieldC"
    label="Field C"
    required
    rules={[{ required: true }]}
  >
    <FQCheckbox.Group options={options} />
  </FQForm.Item>
  <FQForm.Item
    name="fieldD"
    label="Field D"
    required
    rules={[{ required: true }]}
  >
    <FQSwitch />
  </FQForm.Item>
  <FQForm.Item
    name="fieldE"
    label="Field E"
    required
    rules={[{ required: true }]}
  >
    <FQTextareaNew placeholder="Input street" />
  </FQForm.Item>

  <FQButton formType="submit">提交</FQButton>
</FQForm>

表单布局

<FQForm layout='vertical' labelAlign='left' wrapperAlign='left'>
  <FQForm.Item
    name="fieldA"
    label="Field A"
    rules={[{ required: true }]}
  >
    <FQInput placeholder="Input street" />
  </FQForm.Item>
  <FQForm.Item
    name="fieldB"
    label="Field B"
    rules={[{ required: true }]}
  >
    <FQRadio.Group options={options} />
  </FQForm.Item>
  <FQForm.Item
    name="fieldC"
    label="Field C"
    rules={[{ required: true }]}
  >
    <FQCheckbox.Group options={options} />
  </FQForm.Item>
  <FQForm.Item
    name="fieldD"
    label="Field D"
    rules={[{ required: true }]}
  >
    <FQSwitch />
  </FQForm.Item>
  <FQForm.Item
    name="fieldE"
    label="Field E"
    rules={[{ required: true }]}
  >
    <FQTextareaNew placeholder="Input street" />
  </FQForm.Item>

  <FQButton formType="submit">提交</FQButton>
</FQForm>

表单混合布局

<FQForm layout='horizontal'>
  <FQForm.Item
    name="horizontal"
    label="horizontal"
    rules={[{ required: true }]}
  >
    <FQInput />
  </FQForm.Item>
  <FQForm.Item
    name="horizontal2"
    label="horizontal2"
    labelCol={{ span: 8 }}
    rules={[{ required: true }]}
  >
    <FQInput />
  </FQForm.Item>
  <FQForm.Item
    name="horizontal3"
    label="horizontal3"
    labelCol={{ flex: '0 0 112rpx' }}
    labelAlign='left'
    labelWrap
    rules={[{ required: true }]}
  >
    <FQInput />
  </FQForm.Item>
  <FQForm.Item
    name="vertical"
    label="vertical"
    layout='vertical'
    rules={[{ required: true }]}
  >
    <FQInput />
  </FQForm.Item>
</FQForm>

表单变体

<FQForm variant='borderless'>
  <FQForm.Item
    name="fieldA"
    label="Field A"
    rules={[{ required: true }]}
  >
    <FQInput placeholder="Input street" />
  </FQForm.Item>
  <FQForm.Item
    name="fieldB"
    label="Field B"
    rules={[{ required: true }]}
  >
    <FQRadio.Group options={options} />
  </FQForm.Item>
  <FQForm.Item
    name="fieldC"
    label="Field C"
    rules={[{ required: true }]}
  >
    <FQCheckbox.Group options={options} />
  </FQForm.Item>
  <FQForm.Item
    name="fieldD"
    label="Field D"
    rules={[{ required: true }]}
  >
    <FQSwitch />
  </FQForm.Item>
  <FQForm.Item
    name="fieldE"
    label="Field E"
    rules={[{ required: true }]}
  >
    <FQTextareaNew placeholder="Input street" />
  </FQForm.Item>

  <FQButton formType="submit">提交</FQButton>
</FQForm>

API

Form

参数	说明	类型	默认值	版本
initialValues	表单默认值，只有初始化以及重置时生效	object	-
bordered	是否显示表单项边框	boolean	true
form	经 Form.useForm() 创建的 form 控制实例，不提供时会自动创建	FormInstance	-
disabled	设置表单组件禁用	boolean	false
layout	表单布局	'horizontal' | 'vertical'	'horizontal'
labelAlign	label 标签的文本对齐方式	'left' | 'right'	'left'
labelWrap	标签是否换行	boolean	false
labelCol	label 标签布局	object	-
variant	表单内控件变体	'outlined' | 'borderless'	'borderless'
wrapperCol	需要为输入控件设置布局样式时，使用该属性，用法同 labelCol	object	-
wrapperAlign	输入控件方式	'left' | 'right'	'left'
onValuesChange	字段值更新时触发回调事件	function(changedValues, allValues)	-
onFieldsChange	字段更新时触发回调事件，暂未实现	function(changedFields, allFields)	-
onFinish	提交表单且数据验证成功后回调事件	function(values)	-
onFinishFailed	提交表单且数据验证失败后回调事件	function({ values, errorFields, outOfDate })	-

Form.Item

表单字段组件，用于数据双向绑定、校验、布局等。

参数	说明	类型	默认值	版本
bordered	是否显示表单项边框，默认 true	boolean	true
extra	额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。	ReactNode	-
help	提示信息，如不设置，则会根据校验规则自动生成	ReactNode	-
label	label 标签的文本	ReactNode	-
labelAlign	label 标签的文本对齐方式, 默认值为 left	left | right	left
labelWrap	标签是否换行，默认 false	boolean	false
labelCol	label 标签布局，同 <FQCol> 组件	object	-
name	字段路径数组	NamePath	-
noStyle	为 true 时不带样式，作为纯字段控件使用。	boolean	false
required	必填样式设置。	boolean	false
rules	校验规则，设置字段的校验逻辑	Rule[]	-
valuePropName	子节点的值的属性。注意：Switch、Checkbox 的 valuePropName 应该是 checked，否则无法获取这个两个组件的值。	string	value
wrapperCol	需要为输入控件设置布局样式时，使用该属性，用法同 labelCol	object	-
wrapperAlign	输入控件方式，默认值为 left	left | right	left
layout	表单项布局	horizontal | vertical	-

FormInstance

名称	说明	类型	版本
getFieldValue	获取对应字段名的值	(name: NamePath) => any
getFieldsValue	获取一组字段名对应的值，会按照对应结构返回。默认返回现存字段值，当调用 getFieldsValue() 时返回所有值	(nameList?: NamePath[]) => any
resetFields	重置一组字段到 initialValues	() => void
setFieldValue	设置表单的值（该值将直接传入 form store 中并且重置错误信息）	(name: NamePath, value: any) => void
setFieldsValue	设置表单的值（该值将直接传入 form store 中并且重置错误信息）	(values) => void
validateFields	触发表单验证	(nameList?: NamePath[]) => Promise

Interface

NamePath

string | number | (string | number)[]

Rule

参数	说明	类型	版本
len	string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度	number
max	必须设置 type：string 类型为字符串最大长度；number 类型时为最大值；array 类型时为数组最大长度	number
message	错误信息，不设置时会通过模板自动生成	string
min	必须设置 type：string 类型为字符串最小长度；number 类型时为最小值；array 类型时为数组最小长度	number
required	是否为必选字段	-
transform	将字段值转换成目标值后进行校验	-
type	类型，常见有 string | number | boolean。	string
validator	自定义校验，接收 Promise 作为返回值。	(rule, value) => Promise