Playground

Playground 展示了 ncform 大部分的使用场景例子（I believe the example is the best document），建议先仔细浏览下，例子中的配置在实际开发中一般都可以直接使用

快速上手

1.install

yarn add @ncform-plus/ncform @ncform-plus/ncform-theme-elementui element-plus

2.import

import { createApp } from 'vue';
import vueNcform from '@ncform-plus/ncform'
import ncformStdComps from '@ncform-plus/ncform-theme-elementui'
import ElementPlus from 'element-plus'
import App from './App.vue'
import 'element-plus/theme-chalk/index.css'
import '@ncform-plus/ncform/dist/style.css'
import '@ncform-plus/ncform-theme-elementui/dist/style.css'

createApp(App)
  .use(ElementPlus)
  .use(vueNcform, { extComponents: ncformStdComps })
  .mount('#app')

3.usage

<template>
  <ncform
    form-name="your-form-name"
    v-model="formData"
    :form-schema="formSchema"
    @submit="submit"
  />
  <el-button @click="submit">Submit</el-button>
</template>

<script setup>
import { ref } from 'vue'
import { useNcform } from '@ncform-plus/ncform'
import HelloWorld from './components/HelloWorld.vue'

const formData = ref({})
const { ncformValidate } = useNcform()

const formSchema = {
  type: 'object',
  properties: {
    name: {
      type: 'string'
    }
  }
}

const submit = () => {
  ncformValidate('your-form-name').then(data => {
    if (data.result) {
      console.log(formData.value)
      // do what you like to do
    }
  })
}
</script>

可参考 ncform-demo 项目

特性

配置生成：一个JSON数据结构完整描述一个表单的UI及其交互行为，表单的开发工作就完成了
灵活互动：通过强大的dx表达式，表单控件可灵活与其它表单控件进行互动
标准组件：ncform定义了一套标准的表单组件配置规范，未经扩展即可满足你90%以上的表单开发需求
校验丰富：自带常用的十几种验证规则，满足你90%以上的表单验证需求
扩展友好：表单的组件和校验规则都可灵活扩展，并且提供了工具简化扩展工作

解决痛点

后台管理系统中绝大部分的功能不是查询列表，就是录入表单。
表单的开发是一种无趣的，无营养的，高消耗的重复体力活，费时费力。
表单控件间的交互功能，表单项的校验规则，都极容易产生“八哥”。
SO，为了提高表单开发效率，减少失误，提高表单规范和健壮性，最重要，提高开发人员的开发幸福感，项目因此而生

重复造轮子？

圈子里比较有名的类似方案（参考项目列举的几个），存在以下一个或多个的问题：

基本完全按照json-schema来设计，而仅用json-schmea来描述一个表单并不合适
对于表单项之间的关联交互，复杂的验证逻辑，没有很好的解决方案
无法仅提供一份配置就完成所有表单的UI及交互行为（意义在于配置可储存）
默认提供的基础组件不够丰富，难以覆盖实际开发中常用的表单组件
很久没维护，代码编写风格过于久远，难于扩展
组件扩展问题：当前主流的组件实现方案是Vue和React，没有友好的方案，需要使用者自行扩展支持

为了解决以上问题，走上了造轮子之路。。。

为什么不用标准的 json-schema

因为 json-schema 是面向数据 (data) 而非表单 (ui)，对于声明一个表单不太友好。

对于一个表单，关心的是有哪些表单项，表单项长啥样，校验规则怎样，这些都跟字段相关，在一处管理最直观

来个简单的对比：

json-schema 例子：

json-schema sample

ncform 例子：

ncform schema sample

json-schema 对于验证规则，声明在各个地方，不好管理。而 ncform 都集中在 rules。这种设计也便于后面开发表单制作 IDE

dx表达式

通过 dx 表达式，你可以通过取得指定字段的值，然后用原生的 JS 书写你的任意逻辑表达式

指定对象中的属性值，例子：

disabled: 'dx: {{$root.person.age}} < 18'

指定数组中的某一项的值，例子：

disabled: 'dx: {{$root.persons[0].age}} < 18'

指定数组中同一项的属性，例子：

disabled: 'dx: {{$root.persons[i].age}} < 18'
disabled: 'dx: {{$root.persons[i + 1].age}} < 18'

访问全局配置中的常量数据，例子:

disabled: 'dx: {{$root.person.age}} === {{$const.max}}'

// 全局配置如下：
globalConfig: {
  constants: { max: 18 }
}

dx表达式也可用 函数 代替：

function(formData, constData, selfData, tempData, itemIdxChain) { ... }

formData：对应于 $root。表单的数据
constData: 对应于 $const。全局配置中的常量数据
selfData：对应于 $self。只用于 ui.preview.value，指代本身的值
tempData：对应于 $temp。临时存储的值
itemIdxChain：仅对数组项有用，指代当前所在的数组的索引路径，如[1, 0]

一些常见的例子如下：

// 一般对象属性
disabled: function(formData) {
  return formData.person.age < 18;
}

// 数组项
disabled: function(formData, constData, selfData, tempData, itemIdxChain) {
  const [ i ] = itemIdxChain;
  return formData.persons[i].age < 18;
}

// 全局常量
disabled: function(formData, constData) {
  return formData.person.age < constData.max;
}

设计思想

ncform = ncform容器 + ncform主题标准组件

design

一个系统项目，一般都会使用一种UI库（如vue）及其之上的UI实现方案（如elementui）为了与之和平共处，ncform的标准组件可采用与之一致的UI实现方案

ncform Vue版默认提供了elementui主题的标准组件【点击查看】

如果你是iview的粉丝，通过遵循ncform标准组件的规范开发iview主题的标准组件即可

思想：把各种主题的标准组件“丢进”ncform容器，就是一个可配的表单开发利器

Schema Generator

通过 Schema Generator，可以加速你写form schema的速度

你也可以尝试这个第三方的 VSCode 插件: vscode-plugin-ncform-schema

参考项目

作者

Daniel.xiao ：ncform 的设计者和主要实现者
Kyle.lo ：ncform 表单校验部分的实现者和标准组件的主力开发者

贡献者

赞助支持

ncform 是MIT许可的开源项目，完全免费使用。如果它对你有用，也许你可以请我一杯咖啡:)。

一次性支持

每月支持

通过 Patreon 成为支持者或赞助者

Playground #

快速上手 #

特性 #

解决痛点 #

重复造轮子？ #

为什么不用标准的 json-schema #

dx表达式 #

设计思想 #

Schema Generator #

参考项目 #

作者 #

贡献者 #

赞助支持 #

一次性支持 #

每月支持 #