@wowpic/xform-core

XForm 内核包

使用方式

import Form from '@wowpic/xform-core';

const form = new Form({
    schema
});

Form

字段

• key：唯一标识
• schema：schema内容
• fields：字段列表
• fieldMap：字段Map
• components：组件列表
• componentMap：组件Map
• listenerManager：监听管理

事件

• SUBMIT：表单提交
• RESET：表单重置
• BLUR：表单blur
• FORM_CHANGE：表单变化

方法

registerField

注册字段

参数

|属性名称|属性描述|属性类型|默认值| |---|---|---|---| |params|Field字段参数|IFieldEnumParams||

示例

form.registerField({
    key: 'input',
    type: 'Input',
    ui: {
        label: '输入框'
    }
});

registerComponent

注册组件

参数

|属性名称|属性描述|属性类型|默认值| |---|---|---|---| |name|组件名称|string|| |component|组件|any||

示例

Form.registerComponent('component', Component);

getComponent

获取组件

参数

|属性名称|属性描述|属性类型|默认值| |---|---|---|---| |name|组件名称|string||

示例

Form.getComponent('component');

submit

提交表单

参数

无

示例

form.submit();

reset

重置表单

参数

无

示例

form.reset();

validate

验证表单

参数

|属性名称|属性描述|属性类型|默认值| |---|---|---|---| |trigger|触发条件|IRuleTrigger|submit| |status|状态|IRuleStatus|error|

示例

form.validate('submit', 'error');

getValue

获取表单值

参数

|属性名称|属性描述|属性类型|默认值| |---|---|---|---| |key?|唯一标识|IRuleTrigger|submit|

示例

form.getValue();

setValue

设置表单值

参数

|属性名称|属性描述|属性类型|默认值| |---|---|---|---| |values|表单值|{[key in string]: any}||

示例

form.setValue({
    input: '输入框内容'
});

setStatus

设置表单状态

参数

|属性名称|属性描述|属性类型|默认值| |---|---|---|---| |status|状态|IFieldStatus||

示例

form.setStatus('disabled');

purify

获取只含属性不含方法的表单

参数

无

示例

form.purify();

Field

字段

• key：唯一标识
• type：类型
• status：状态
• initialStatus：初始状态
• ui：样式相关配置
• initialUI：初始样式相关配置
• props：属性相关配置
• initialProps：初始属性相关配置
• rules：校验配置
• listeners：联动相关配置
• dirty：值跟之前相比是否改变
• pristine：值是否改变
• value：值
• initialValue：初始值
• valid：是否校验通过
• message：错误提示
• validStatus：校验状态
• options：options配置
• context：父元素
• optionManager：options管理器

事件

• FIELD_CHANGE：字段属性变化
• VALUE_CHANGE：字段值变化
• VALID_CHANGE：字段校验状态变化
• OPTIONS_CHANGE：字段options变化
• RESET：字段重置
• BLUR：字段blur

方法

validate

验证字段

参数

|属性名称|属性描述|属性类型|默认值| |---|---|---|---| |trigger|触发条件|IRuleTrigger|submit|

示例

field.validate('submit');

set

设置字段状态、ui、props、options、value

参数

|属性名称|属性描述|属性类型|默认值| |---|---|---|---| |state|设置值|IListenerSet||

示例

field.set({
    status: 'hidden',
    value: '值'
});

unset

重置字段状态、ui、props、options、value

参数

|属性名称|属性描述|属性类型|默认值| |---|---|---|---| |state|设置值|IListenerSet||

示例

field.unset({
    status: true,
    value: true
});

purify

获取只含属性不含方法的字段

参数

无

示例

field.purify();

setOptions

设置options

参数

|属性名称|属性描述|属性类型|默认值| |---|---|---|---| |options|设置options|IOptionManagerOptionsArray||

示例

field.setOptions({
    name: '字段',
    value: '值'
});

setValid

设置校验状态

参数

|属性名称|属性描述|属性类型|默认值| |---|---|---|---| |result|校验状态结果|IOptionManagerOptionsArray||

示例

field.setOptions({
    name: '字段',
    value: '值'
});

setStatus

设置字段状态

参数

|属性名称|属性描述|属性类型|默认值| |---|---|---|---| |status|字段状态|IFieldStatus||

示例

field.setStatus('hidden');

setUI

设置ui

参数

|属性名称|属性描述|属性类型|默认值| |---|---|---|---| |ui|字段ui|IFieldUI||

示例

field.setUI({
    label: '字段名'
});

setProps

设置props

参数

|属性名称|属性描述|属性类型|默认值| |---|---|---|---| |props|字段props|IFieldProps||

示例

field.setProps({
    type: 'test'
});

setValue

设置值

参数

|属性名称|属性描述|属性类型|默认值| |---|---|---|---| |value|值|any||

示例

field.setValue('值');

getValue

获取值

参数

无

示例

field.getValue();

reset

重置值

参数

无

示例

field.reset();

blur

触发blur

参数

无

示例

field.blur();