ReactiveForm

https://reactive-form.github.io/

ReactiveForm 是一款模型驱动的可扩展的表单引擎，遵从模型与视图分离的设计原则。
支持对不同的 UI 框架和运行环境定制视图组件，同时保持一致的模型 API 对响应式的数据处理过程进行干预和扩展。

快速开始

$3

ReactiveForm 提供多种安装格式，推荐使用esm格式。
建议将项目中打包工具 & Node 升级至支持 ES Module 的版本，以便于使用 sub path import。

#### yarn

``bash
yarn add 'rcfm'
`

#### npm

`bash
npm install 'rcfm' --save
`

$3

`javascript
import {Form} from 'rcfm'

let {reactive} = Form.create()
let fieldsetId = reactive.add({
props: {
type: 'Fieldset',
name: 'fields',
label: '用户信息统计表'
}
})
let textFiledId = reactive.add({
parentId: fieldsetId,
props: {
type: 'TextField',
name: 'username',
label: '用户名',
validation: [{presence: true}, {maxLength: 10}]
}
})
let numberFieldId = reactive.add({
parentId: fieldsetId,
props: {
type: 'NumberField',
name: 'age',
label: '年龄',
visible: [{
when: {valOf: '<< fields.username.value >>', presence: true},
then: true
}, {
else: false
}]
}
})
`

$3

当前版本提供基于 React 和 Vue 的 UI 组件及内置表单构建/填写视图，使用构建视图可通过 UI 可视化方式构建模型，
构建的模型配置可通过填写视图生成表单。

#### 使用内置表单构建视图

##### React

`javascript
import 'rcfm/style'
import React from 'react'
import ReactDOM from 'react-dom/client'
import { Form } from 'rcfm'
import { UI } from 'rcfm/react'

const {reactive} = Form.create()

const Builder = UI.use('React.View.Form.Builder')

ReactDOM.createRoot(
document.getElementById('builder')
).render(

)
`

##### Vue

`javascript
import 'rcfm/style'
import { createApp } from 'vue'
import { Form } from 'rcfm'
import { UI } from 'rcfm/vue'

const {reactive} = Form.create()

const Builder = UI.use('Vue.View.Form.Builder')

createApp({
setup() { return {reactive} },
components: {Builder},
template:
}).mount('#builder')
`

#### 使用内置表单填写视图

##### React

`javascript
import 'rcfm/style'
import React from 'react'
import ReactDOM from 'react-dom/client'
import { Form } from 'rcfm'
import { UI } from 'rcfm/react'

const {reactive} = Form.create()
reactive.seed(reactive.family.root(), {/ 构建视图导出的表单配置对象 /})

const Renderer = UI.use('React.View.Form')

ReactDOM.createRoot(
document.getElementById('renderer')
).render(

)
`

##### Vue

`javascript
import 'rcfm/style'
import { createApp } from 'vue'
import { Form } from 'rcfm'
import { UI } from 'rcfm/vue'

const {reactive} = Form.create()
reactive.seed(reactive.family.root(), {/ 构建视图导出的表单配置对象 /})

const Renderer = UI.use('Vue.View.Form')

createApp({
setup() { return {reactive} },
components: {Renderer},
template:
}).mount('#renderer')
``

缺陷与特性请求

提交缺陷或特性请求前， 请先搜索 issue list 中是否提交过类似 issue，
请不要重复提交。

参与贡献

开始参与贡献前，
请阅读 CONTRIBUTING 指引，
搭建合适的开发环境。

版本管理

ReactiveForm 遵循 SemVer 版本管理方式。
各版本变更请参考 CHANGELOG

版权协议

Copyright JLxiangyun under the CC BY-ND license.