@ice/form

---
title: IceForm
category: Components
chinese: 表单组件
---

表单组件

参数（Props）

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
| ------ | ---- | ---- | ---- | ------ | ---- |
| initialValues | 表单初始值 | N | object | {} | - |
| onSubmit | submit函数 | Y | function | - | - |
| onChange | 表单变化回调 | N | function | - | function(values: object, item: object) => void
参数:
values: {object} 表单数据
item: {object} 详细
item.name: {string} 变化的组件名
item.value: {string} 变化的数据 |
| rules | 校验规则 | N | object | {} | - |
| effects | 联动规则 | N | array | [] | - |
| layout | 表单布局 | N | object | | - |
| renderField | 自定义 Field 布局 | N | function | - | function({label, component, error}) => dom
参数:
label: {string/element} Field 的 label
component: {string/function} 待渲染的控件
error: {string/element} Field 错误提示信息 |

其他属性比如 style、className 等均会传递到 form 标签上。

layout 是个对象，包含 4 个属性：

``js { labelAlign: 'left', // label 的位置，'left'、'top'，默认 'left' labelTextAlign: 'right', // label 文字对齐方式，'left'、'right'，默认 'right' labelCol: 1, // label 占的栅格宽度，共 12 等分，默认 2 wrapperCol: 3, // 控件占的栅格宽度，共 12 等分，默认 6 }`

rules 是一个 Object，key 是 的 name 属性值，value 是个数组，数组里面的每一项是一个校验规则，参考 async-validator。

`js onSubmit={this.onSubmit} style={{color: '#ee7893'}} rules={{ username: [{ required: true, min: 5, message: '姓名至少5个字符' }], age: [{ required: true, message: '年龄必填' }] }} >`

effects 是个数组，写法如下：

`js onSubmit={this.onSubmit} effects={[ { field: 'username', handler: formCore => { if (formCore.getFieldValue('username') === 'ice') { formCore.setFieldValue('age', 2) } } } ]} >

Hello Form

监听该 field 的 onChange 事件，然后设置其他表单项的数据，从而达到联动效果。handler 的参数是 formCore 对象，该对象暴露一些 api 可以设置 value、error、show/hide 等。

`Field 组件`

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | ------ | ---- | ---- | ---- | ------ | ---- | | label | 表单项的 label | N | string/element | - | - | | name | 表单项的 name | Y | string | - | - | | component | 表单类型，原生 html 标签或者三方组件 | N | string/function | - | 'input' 'textarea' Input Radio | | value | 表单项的值 | N | - | '' | - | | rules | 校验规则 | N | object or array | - | - | | effects | 联动规则 | N | object | - | - | | visible | 显示隐藏当前 Field | N | boolean | true | true/false | | setValueFormatter | 格式化控件渲染值 | N | function | | function(savedValue) => renderValue | | getValueFormatter | 格式化控件提交值 | N | function | | function(renderValue) => savedValue | | layout | 设置当前 Field 的布局 | N | object | 同 Form layout | 当前 Field 的 layout 会覆盖 Form 的 layout | | tips | 提示信息 | N | string | | | | valueName | 控件值的名称，比如，radio 的 valueName 为 'checked'，value 为 true/false | N | string | | 比如 Fusion 的 Switch 组件 | | errorRender | 自定义 error 渲染 | N | function(error) {} | | | | onChange | 自定义 onChange 函数 | N | function() {} | | 默认情况下已处理表单的 onChange(eventOrValue) 事件，如果接入的三方控件 onChange 的第一个参数不是 event 或者 value，可以主动设置对应的值。比如，接入控件的 onChange(xxx, value) 第二个参数才是 value，则可以手动设置formCore.setValue(fieldname, value) |

style、className 属性会传递到 Field 最外层 dom 上，其他属性会传递到 component 上，如果没有 component 但有 children，则属性传递到 children 上。

Field 的 rules 和 effects 不需要 name 作为 key 了，写法如下：

`js


  
      handler: formCore => {
      if (formCore.getFieldValue('nickname') === 'snow') {
        formCore.setFieldProps('age', {
          visible: true,
        });
      } else {
        formCore.setFieldProps('age', {
          visible: false,
        });
      }
    }
  }} />
      required: true,
    message: '年龄必填'
  }]} />


FieldArray 组件
FieldArray 表示渲染数组类型的数据，属性同 Field：

`js onSubmit={this.onSubmit} >`

formCore `API`

formCore 会暴露一些 API，使用这些 API 可以获取、设置表单的数据、状态等。

- getFieldValue(name)：获取某一 Field的值 -setFieldValue(name, value)：设置某一 Field的值 -getValues()：获取表单的 values -setValues(values, runEffects)：设置表单的 values，runEffects 为 Boolean，表示设置 values 之后是否需要执行表单的 effects，默认 false -getFieldError(name)：获取某一 Field的 error 信息 -setFieldError(name, errMsg)：设置某一 Field的 error 信息 -getErrors()：获取所有 Field的 error 信息 -setErrors(errors)：设置某些 Field的 error 信息 -getFieldProps(name)：获取某一 Field的属性值 -setFieldProps(name, prop)：设置某一 Field的属性值 -submit()：提交表单 -reset(initialValues)：重置表单值为表单初始化时的默认值，如果表单初始化时没有默认值，则清空表单；如果传了参数 initialValues，则 initialValues 会成为新的表单默认值

也可以通过属性的方式获取到一些数据：

- formCore.values：获取表单的所有值 -formCore.errors：获取表单校验的错误信息 -formCore.pristine：表单当前的 values 是否与 initialValues` 相等

参数（Props）

其他属性比如 style、className 等均会传递到 form 标签上。

layout 是个对象，包含 4 个属性：

rules 是一个 Object，key 是 的 name 属性值，value 是个数组，数组里面的每一项是一个校验规则，参考 async-validator。

`js onSubmit={this.onSubmit} style={{color: '#ee7893'}} rules={{ username: [{ required: true, min: 5, message: '姓名至少5个字符' }], age: [{ required: true, message: '年龄必填' }] }} >`

effects 是个数组，写法如下：

`js onSubmit={this.onSubmit} effects={[ { field: 'username', handler: formCore => { if (formCore.getFieldValue('username') === 'ice') { formCore.setFieldValue('age', 2) } } } ]} >

Hello Form

`Field 组件`

style、className 属性会传递到 Field 最外层 dom 上，其他属性会传递到 component 上，如果没有 component 但有 children，则属性传递到 children 上。

Field 的 rules 和 effects 不需要 name 作为 key 了，写法如下：

`js


  
      handler: formCore => {
      if (formCore.getFieldValue('nickname') === 'snow') {
        formCore.setFieldProps('age', {
          visible: true,
        });
      } else {
        formCore.setFieldProps('age', {
          visible: false,
        });
      }
    }
  }} />
      required: true,
    message: '年龄必填'
  }]} />


FieldArray 组件
FieldArray 表示渲染数组类型的数据，属性同 Field：

`js onSubmit={this.onSubmit} >`

formCore `API`

formCore 会暴露一些 API，使用这些 API 可以获取、设置表单的数据、状态等。

也可以通过属性的方式获取到一些数据：

- formCore.values：获取表单的所有值 -formCore.errors：获取表单校验的错误信息 -formCore.pristine：表单当前的 values 是否与 initialValues` 相等

Dist Tags

参数（Props）

`Field 组件`

FieldArray 组件

formCore `API`

延伸阅读

$3

$3

$3

$3

$3

@ice/form

Dist Tags

参数（Props）

`Field 组件`

FieldArray 组件

formCore `API`

延伸阅读

$3

$3

$3

$3

$3

@ice/form

Dist Tags

参数（Props）

Field 组件

FieldArray 组件

formCore API

延伸阅读

$3

$3

$3

$3

$3

@ice/form

Dist Tags

参数（Props）

Field 组件

FieldArray 组件

formCore API

延伸阅读

$3

$3

$3

$3

$3

`Field 组件`

formCore `API`

`Field 组件`

formCore `API`