| | | | | | | ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | | IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |

xy-form

表单组件, 提供了表单样式, 数据存储

安装

# yarn
yarn add xy-form

使用例子

import React from "react";
import ReactDOM from "react-dom";
import { Form, Separator, FormBlock, FormItem, FormItemField, FormSubmitButton } from "xy-form";
ReactDOM.render(
    <Form onSubmitBefore={onSubmitBefore} onSubmit={onSubmit}>
        <FormItem label="姓名" prop="name">
            <input type="text" />
        </FormItem>
        <FormItem label="手机号" prop="phone">
            <input type="text" />
        </FormItem>
        <FormSubmitButton>
            <button>提交</button>
        </FormSubmitButton>
        <input type="reset" value="重置" />
    </Form>,
    container,
);

API

Form

| 属性 | 说明 | 类型 | 默认值 | | --------------- | ------------------------ | --------------------------------------------------------------------------------- | ---------------------- | | disabled | 是否禁用表单 | boolean | false | | trigger | 默认触发事件 | ValidateTrigger | ValidateTrigger.change | | labelPosition | 标签对齐位置 | "right"/"left"/"top" | "left" | | labelWidth | 标签宽度 | string | "85px" | | inline | 是否内联模式 | boolean | false | | action | 与原生表单一样 | string | 无 | | enctype | 与原生表单一样 | string | 无 | | method | 与原生表单一样 | string | 无 | | name | 与原生表单一样 | string | 无 | | target | 与原生表单一样 | string | 无 | | defaultModel | 默认对象, 用于提供默认值 | any | 无 | | validConfig | 验证配置 | ValidateConfig | 无 | | getFormMethods | 获取表单方法 | (methods: FormMethods) => void | 无 | | onFieldChange | 字段值改变事件 | (prop: string, value: any) => void | 无 | | onFieldValidate | 字段需要验证事件 | (value: any, configs: FieldConfig[], params: ValidateParams) => Promise | 无 | | onSubmitBefore | 开始点击提交按钮 | (data: any) => void | 无 | | onFormValidate | 表单需要验证事件 | (fieldMapper: React.MutableRefObject<Map<string, FormItemState>>) => Promise | 无 | | onValidateFail | 表单验证失败事件 | (error: Error, data: any) => void | 无 | | onSubmit | 表单提交事件 | (data: any) => void | 无 |

FormBlock

| 属性 | 说明 | 类型 | 默认值 | | ---- | ---------- | ------ | ------ | | prop | 字段域名称 | string | 无 |

FormItemField

| 属性 | 说明 | 类型 | 默认值 | | ---------------- | ------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ------- | | prop | 代理字段名 | string | 无 | | valueKey | 代理值的 key | string | "value" | | converValue | 如何从 onChange 转换值 | (val: any) => any | 无 | | label | 中文标签名 | string | 无 | | children | 代理输入组件 | React.ReactNode | 无 | | trigger | 默认触发事件 | ValidateTrigger | 无 | | defaultValue | 默认值 | any | 无 | | normalize | 规范化函数, 比如绑定的是 Date 类型，form 最后同步时可以是日期字符串 | (value: T) => NormalizeResult | 无 | | disabledValidate | 是否禁用验证 | boolean | 无 | | onValidate | 执行验证事件 | (value: T, validateResult: ValidateResult, input: HTMLElement, normalize?: (value: T) => NormalizeResult) => void | 无 |

FormItem

| 属性 | 说明 | 类型 | 默认值 | | ---------------- | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ------- | | labelPosition | 标签对齐位置 | "right"/"left"/"top" | "left" | | prop | 代理字段名 | string | 无 | | valueKey | 代理值的 key | string | "value" | | converValue | 如何从 onChange 转换值 | (val: any) => any | 无 | | label | 中文标签名 | React.ReactNode | 无 | | children | 代理输入组件 | React.ReactNode | 无 | | trigger | 默认触发事件 | ValidateTrigger | 无 | | defaultValue | 默认值 | any | 无 | | normalize | 规范化函数, 比如绑定的是 Date 类型，form 最后同步时可以是日期字符串 | (value: T) => NormalizeResult | 无 | | serialization | 序列化函数, 将外部设置的值,(比如默认值和 getFieldValue 的值进行转换然后设置) | (value: T) => any | 无 | | disabledValidate | 是否禁用验证 | boolean | 无 | | onValidate | 执行验证事件 | (value: T, validateResult: ValidateResult, input: HTMLElement, normalize?: (value: T) => NormalizeResult) => void | 无 |

Form

• 顶级就能控制所有输入框的 disabled 状态
• 提供通用的默认配置, 详细看FormContext
• 提供很多事件钩子， 比如字段值改变， 比如字段验证状态改变， 比如表单验证完毕等
• 挂接原生 submit,rest 事件
• 表单样式
• 提供表单方法, 详细看FormMethods

FormBlock

• 用于嵌套数据

FormItem

• 提供表单段落样式
• 显示错误信息文本
• 指定某个字段验证状态改变后， 再次判断是否验证失败
• 提供了prop则默认自带FormItemField组件

FormItemField

• 代理包裹组件的value, onChange, disabled属性
• 内部有验证是否失败状态, 和失败原因
• 初始化时候保留当前组件初始值, initialValue, 在 form.resetFields()时候以重置输入框的值
• normalize, 可选规范化函数， 比如绑定的是 Date 类型，form 最后同步时可以是日期字符串

FormContext

提供整体通过默认状态

• disabled 是否全部默认禁用
• trigger 全部默认触发事件
• labelPosition 标签对齐位置 "right" | "left" | "top"
• labelWidth 标签宽度
• inline 是否内陆模式

FormMehhods

提供表单操作功能

export interface FormMethods {
    /**
     * 设置模型值
     * @description 快速设置整个模型的值
     */
    setModel: (model: any) => any;
    /**
     * 获取字段值
     */
    getFieldValue: (prop: string) => any;
    /**
     * 设置字段值
     */
    setFieldValue: (prop: string, value: any) => void;
    /**
     * 获取字段验证结果
     */
    getFieldValidateResult: (props: string) => ValidateResult;
    /**
     * 重置字段到初始值
     */
    resetField: (prop: string) => void;
    /**
     * 重置所有字段到初始值
     */
    resetFields: () => void;
    /**
     * 验证指定字段
     */
    validateField: (prop: string) => Promise<any>;
    /**
     * 验证所有字段
     */
    validateFields: () => Promise<any>;
    /**
     * 获取对应标签
     */
    getFieldLabel: (prop: string) => React.ReactNode;
    /**
     * 表单提交
     */
    submit: (uncaught?: boolean) => Promise<any>;
    /**
     * 获取数据
     */
    toData: () => any;
}

开发

yarn run start

例子

http://localhost:6006

测试

yarn run test

开源许可

xy-form is released under the MIT license.