ReactiveForm

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

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

快速开始

安装

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

yarn

yarn add 'rcfm'

npm

npm install 'rcfm' --save

构建模型

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
    }]
  }
})

应用视图

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

使用内置表单构建视图

React

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(
  <Builder reactive={reactive} />
)

Vue

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: `<Builder :reactive="reactive" />`
}).mount('#builder')

使用内置表单填写视图

React

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(
  <Renderer reactive={reactive} />
)

Vue

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: `<Renderer :reactive="reactive" />`
}).mount('#renderer')

缺陷与特性请求

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

参与贡献

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

版本管理

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

版权协议

Copyright JLxiangyun under the CC BY-ND license.