# xy-form > 基于React的表单组件 Latest version **0.7.2** (published 2020-07-01) · MIT license · 0 weekly downloads ## Install ```sh npm install xy-form pnpm add xy-form yarn add xy-form bun add xy-form ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.7.2 | | Published | 2020-07-01 | | First published | 2019-04-25 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 8 | | Unpacked size | 94.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | XueYou | | Maintainers | xueyou2000 | | Keywords | react, react-component, xy-form | ## Links - npm: https://www.npmjs.com/package/xy-form - Repository: https://github.com/xueyou2000/xy-form - Homepage: https://github.com/xueyou2000/xy-form#readme - Issues: https://github.com/xueyou2000/xy-form/issues - npm.io page: https://npm.io/package/xy-form ## Dependencies (8) - [react](https://npm.io/package/react.md) ^16.12.0 - [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.15 - [react-dom](https://npm.io/package/react-dom.md) ^16.12.0 - [classnames](https://npm.io/package/classnames.md) ^2.2.6 - [utils-hooks](https://npm.io/package/utils-hooks.md) ^0.0.72 - [validate-runner](https://npm.io/package/validate-runner.md) ^1.0.22 - [validate-methods](https://npm.io/package/validate-methods.md) ^1.1.0 - [validate-provider](https://npm.io/package/validate-provider.md) ^1.0.33 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.7.2 (latest) — 2020-07-01 - 0.7.1 — 2020-07-01 - 0.7.0 — 2019-12-26 - 0.6.0 — 2019-12-25 - 0.5.0 — 2019-12-20 - 0.4.0 — 2019-11-19 - 0.3.5 — 2019-10-29 - 0.3.4 — 2019-10-29 - 0.3.3 — 2019-10-29 - 0.3.2 — 2019-10-28 - 0.3.1 — 2019-10-27 - 0.3.0 — 2019-09-19 - 0.2.2 — 2019-09-12 - 0.2.1 — 2019-09-11 - 0.2.0 — 2019-09-09 - … 20 more at https://npm.io/package/xy-form/versions ## README | ![IE](https://github.com/alrra/browser-logos/blob/master/src/edge/edge_48x48.png?raw=true) | ![Chrome](https://github.com/alrra/browser-logos/blob/master/src/chrome/chrome_48x48.png?raw=true) | ![Firefox](https://github.com/alrra/browser-logos/blob/master/src/firefox/firefox_48x48.png?raw=true) | ![Opera](https://github.com/alrra/browser-logos/blob/master/src/opera/opera_48x48.png?raw=true) | ![Safari](https://github.com/alrra/browser-logos/blob/master/src/safari/safari_48x48.png?raw=true) | | ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | | IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ | ![NPM version](http://img.shields.io/npm/v/xy-form.svg?style=flat-square) ![node version](https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square) ![npm download](https://img.shields.io/npm/dm/xy-form.svg?style=flat-square) [![xy-form](https://nodei.co/npm/xy-form.png)](https://npmjs.org/package/xy-form) # xy-form 表单组件, 提供了表单样式, 数据存储 ## 安装 ```bash # yarn yarn add xy-form ``` ## 使用例子 ```tsx import React from "react"; import ReactDOM from "react-dom"; import { Form, Separator, FormBlock, FormItem, FormItemField, FormSubmitButton } from "xy-form"; ReactDOM.render(
, 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>) => 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 > 提供表单操作功能 ```ts 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; /** * 验证所有字段 */ validateFields: () => Promise; /** * 获取对应标签 */ getFieldLabel: (prop: string) => React.ReactNode; /** * 表单提交 */ submit: (uncaught?: boolean) => Promise; /** * 获取数据 */ toData: () => any; } ``` ## 开发 ```sh yarn run start ``` ## 例子 http://localhost:6006 ## 测试 ``` yarn run test ``` ## 开源许可 xy-form is released under the MIT license. --- _Source: https://npm.io/package/xy-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._