{"id":13510135,"url":"https://github.com/ncform/ncform","last_synced_at":"2025-05-15T09:08:13.863Z","repository":{"id":40294629,"uuid":"140506352","full_name":"ncform/ncform","owner":"ncform","description":"🍻 ncform, a very nice configuration generation way to develop forms ( vue, json-schema, form, generator )","archived":false,"fork":false,"pushed_at":"2023-01-04T07:26:28.000Z","size":10965,"stargazers_count":1197,"open_issues_count":98,"forks_count":145,"subscribers_count":35,"default_branch":"master","last_synced_at":"2025-05-12T17:14:26.149Z","etag":null,"topics":["form","form-schema","generator","json-schema","playground","schema-generation","vue"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ncform.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"contributing.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"daniel-dx","patreon":"ncform","custom":"https://paypal.me/danieldx666"}},"created_at":"2018-07-11T01:37:33.000Z","updated_at":"2025-05-10T13:40:46.000Z","dependencies_parsed_at":"2023-02-02T03:16:27.881Z","dependency_job_id":null,"html_url":"https://github.com/ncform/ncform","commit_stats":null,"previous_names":[],"tags_count":58,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncform%2Fncform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncform%2Fncform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncform%2Fncform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ncform%2Fncform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ncform","download_url":"https://codeload.github.com/ncform/ncform/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254310520,"owners_count":22049470,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form","form-schema","generator","json-schema","playground","schema-generation","vue"],"created_at":"2024-08-01T02:01:25.547Z","updated_at":"2025-05-15T09:08:08.844Z","avatar_url":"https://github.com/ncform.png","language":"JavaScript","funding_links":["https://github.com/sponsors/daniel-dx","https://patreon.com/ncform","https://paypal.me/danieldx666","https://www.patreon.com/ncform"],"categories":["JavaScript","vue","Components \u0026 Libraries","UI Components [🔝](#readme)","UI Components"],"sub_categories":["UI Components","Form"],"readme":"# ncform \n\n[![CircleCI](https://img.shields.io/circleci/project/github/ncform/ncform/master.svg)](https://circleci.com/gh/ncform/ncform/tree/master)\n![vue 2.x](https://img.shields.io/badge/vue-2.x-green.svg)\n![license MIT](https://img.shields.io/npm/l/vue.svg)\n[![Cypress.io tests](https://img.shields.io/badge/cypress.io-tests-green.svg?style=flat-square)](https://dashboard.cypress.io/#/projects/enxoqt/runs)\n[![Gitter](https://img.shields.io/badge/GITTER-JOIN%20CHAT%20%E2%86%92-ff69b4.svg?style=flat-square)](https://gitter.im/ncform/community?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)\n\n[中文版](README_CN.md)\n\n![ncform banner](docs/images/ncform-banner.gif)\n\nncform, a nice form development way that generates form UIs and their interactions with just configuration.\n\nComes with **standard components** and **validation rules**, out of the box.\n\nHave powerful **control interaction** and **extension capabilities**, do what you want.\n\n\u003e If you are hesitant, you can read this article: [How to choose](https://github.com/ncform/ncform/wiki/How-to-choose-a-project-that-generate-forms-from-a-JSON-schema)\n\n[![Playground](docs/images/playground-1.jpg)](https://ncform.github.io/ncform/ncform-show/playground/index.html)\n\n---\n\n- Table Of Contents\n  - [Playground](#Playground)\n  - [Quick Start](#Quick-Start)\n    - [In node.js](#In-nodejs)\n    - [In browser](#In-browser)\n  - [Features](#Features)\n  - [📄Documents](#Documents)\n  - [Solve Pain Points](#Solve-Pain-Points)\n  - [Repeat the wheel?](#Repeat-the-wheel)\n  - [Why not use the standard json-schema?](#Why-not-use-the-standard-json-schema)\n  - [dx expression](#dx-expression)\n  - [Design Thinking](#Design-Thinking)\n  - [Schema Generator](#Schema-Generator)\n  - [❤️Sponsor](#Sponsor)\n  - [Contribution](#Contribution)\n\n## Playground\n\nExperience the charm of ncform on the [Playground](https://ncform.github.io/ncform/ncform-show/playground/index.html) to deepen your understanding of ncform\n\n\u003e [Playground](https://ncform.github.io/ncform/ncform-show/playground/index.html) shows the examples of ncform most of the use of the scene ( I believe the examples are the best document ), it is recommended to carefully browse the examples, the configuration of the examples can be used directly in the actual development\n\n## Quick Start\n\n### In node.js\n\n1.install\n```\nnpm i @ncform/ncform @ncform/ncform-common --save\nnpm i @ncform/ncform-theme-elementui element-ui axios --save \n```\n\n2.import\n```\nimport Vue from 'vue';\nimport vueNcform from '@ncform/ncform';\n\nimport Element from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';\nimport ncformStdComps from '@ncform/ncform-theme-elementui';\nimport axios from 'axios';\n\nVue.use(Element);\nVue.use(vueNcform, { extComponents: ncformStdComps, /*lang: 'zh-cn'*/ });\nwindow.$http = Vue.prototype.$http = axios;\n```\n\n3.usage\n```\n# demo.vue\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cncform :form-schema=\"formSchema\" form-name=\"your-form-name\" v-model=\"formSchema.value\" @submit=\"submit()\"\u003e\u003c/ncform\u003e\n    \u003cel-button @click=\"submit()\"\u003eSubmit\u003c/el-button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n  data () {\n    return {\n      formSchema: {\n        type: 'object',\n        properties: {\n          name: {\n            type: 'string'\n          }\n        }\n      }\n    }\n  },\n  methods: {\n    submit () {\n      this.$ncformValidate('your-form-name').then(data =\u003e {\n        if (data.result) {\n          console.log(this.$data.formSchema.value)\n          // do what you like to do\n        }\n      })\n    }\n  }\n}\n\u003c/script\u003e\n```\nYou can refer to the [ncform-demo](https://github.com/daniel-dx/ncform-demo) project\n\n### In browser\n\n```\n\u003chtml\u003e\n\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/element-ui@2.4.3/lib/theme-chalk/index.css\"\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n  \u003cdiv id=\"demo\"\u003e\n    \u003cncform :form-schema=\"formSchema\" form-name=\"your-form-name\" v-model=\"formSchema.value\" @submit=\"submit()\"\u003e\u003c/ncform\u003e\n    \u003cel-button @click=\"submit()\"\u003eSubmit\u003c/el-button\u003e\n  \u003c/div\u003e\n\n  \u003cscript type=\"text/javascript\" src=\"https://unpkg.com/vue/dist/vue.min.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\" src=\"https://unpkg.com/axios/dist/axios.min.js\"\u003e\u003c/script\u003e\n\n  \u003cscript type=\"text/javascript\" src=\"https://unpkg.com/@ncform/ncform-common/dist/ncformCommon.min.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\" src=\"https://unpkg.com/@ncform/ncform/dist/vueNcform.min.js\"\u003e\u003c/script\u003e\n\n  \u003cscript type=\"text/javascript\" src=\"https://unpkg.com/element-ui/lib/index.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\" src=\"https://unpkg.com/@ncform/ncform-theme-elementui/dist/ncformStdComps.min.js\"\u003e\u003c/script\u003e\n\n  \u003cscript type=\"text/javascript\"\u003e\n    Vue.use(vueNcform, { extComponents: ncformStdComps, /*lang: 'zh-cn'*/ });\n\n    // Bootstrap the app\n    new Vue({\n      el: '#demo',\n      data: {\n        formSchema: {\n          type: 'object',\n          properties: {\n            name: {\n              type: 'string'\n            }\n          }\n        }\n      },\n      methods: {\n        submit() {\n          this.$ncformValidate('your-form-name').then(data =\u003e {\n            if (data.result) {\n              // do what you like to do\n            }\n          });\n        }\n      }\n    });\n  \u003c/script\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n## Features\n\n- Configuration generation: A JSON data structure completely describes the UI of a form and its interaction behavior, and the development of the form is completed.\n\n- Flexible interaction: Form controls flexibly interact with each other with powerful `dx expressions`\n\n- Standard components: ncform defines a standard set of form component configuration specifications that can meet more than 90% of your form development needs without extensions.\n\n- Rich verification: ncform comes with more than ten commonly used verification rules to meet more than 90% of your form validation requirements\n\n- Extended friendliness: Form components and validation rules can be flexible extended and provide tools to simplify extension work\n\n## Documents\n\n- [ncform config / props / api / event](./CONFIG.md)\n\n- Standard Components [Preview Version](https://ncform.github.io/ncform/ncform-theme-elementui/index.html) | [Text Version](./STD-COMP.md)\n\n- [Custom Form Controls And Validation Rules](./EXT-DOC.md)\n\n## Solve Pain Points\n\nMost of the features in the management system are not the query list, that is, the form.  \nThe development of the form is a boring, nutrient-free, high-consumption repetitive physical activity that takes time and effort.  \nThe interaction between the form controls and the validation rules of the form items are very easy to produce bugs.  \nSo, in order to improve the efficiency of form development, reduce bugs, improve form development specifications and robustness, and most importantly, improve the development happiness of developers, the project is born\n\n## Repeat the wheel?\n\nA similarly well-known scheme in the community  ( listed in the reference projects ) has one or more of the following problems:\n\n1. Basically designed in accordance with json-schema, but it is not appropriate to use json-schmea to describe a form.\n\n2. For the interaction between form items, complex verification logic, there is no good solution\n\n3. Can't complete all the UI and interaction behavior of the form with just one configuration ( meaning the configuration can be stored )\n\n4. The underlying components provided by default are not rich enough to cover the form components commonly used in actual development.\n\n5. Long time no maintenance, code writing style is too old and is difficult to expand\n\n6. Component extension problem: There is no friendly extension solution for the current hot component implementations like Vue and React. \n\nIn order to solve the above problems, embarked on the road of making wheels. . .\n\n## Why not use the standard json-schema?\n\nBecause json-schema is data-oriented rather than form (ui), it is not very friendly for declaring a form.\n\nFor a form, care about what the form items are, what the form items look like, what are the validation rules, all these are related to the fields. The most intuitive management is in one place\n\nCome to a simple comparison:\n\n- json-schema example：\n\n![json-schema sample](docs/images/json-schema-sample.jpg)\n\n- ncform example：\n\n![ncform schema sample](docs/images/ncform-schema-sample.jpg)\n\nJson-schema for validation rules, declared in various places, not well managed. And ncform is concentrated in rules field. This design is also convenient for later development of form development IDE\n\n## dx expression：\n\nWith `dx` expressions, you can get the value of the specified field with `{{$root.xxx}}` and then write your arbitrary logical expression with the native JS.\n\n- Specify the attribute value in the object, for example：\n```\ndisabled: 'dx: {{$root.person.age}} \u003c 18'\n```\n\n- Specify the value of an item in the array, for example:\n```\ndisabled: 'dx: {{$root.persons[0].age}} \u003c 18'\n```\n\n- Specify the properties of the same item in the array, for example:\n```\ndisabled: 'dx: {{$root.persons[i].age}} \u003c 18'\ndisabled: 'dx: {{$root.persons[i + 1].age}} \u003c 18'\n```\n\n- Access constant data in the global configuration, for example:\n\n```\ndisabled: 'dx: {{$root.person.age}} === {{$const.max}}'\n\n// The global configuration is as follows\nglobalConfig: {\n  constants: { max: 18 }\n}\n```\n\n\u003e dx expressions can also be replaced with `function` :\n\nfunction(formData, constData, selfData, tempData, itemIdxChain) { ... }\n\n- formData: corresponds to `{{$root}}`. Form data\n- constData: corresponds to `{{$const}}`. Constant data in global configuration\n- selfData: corresponds to `{{$self}}`. Used only for `ui.preview.value`, which refers to its own value\n- tempData: corresponds to `{{$temp}}`. Temporarily stored value\n- itemIdxChain: useful only for array items, refers to the index path of the current array, such as [1, 0]\n\nSome common examples are as follows:\n\n```\n// form data\ndisabled: function(formData) {\n  return formData.person.age \u003c 18;\n}\n\n// array item\ndisabled: function(formData, constData, selfData, tempData, itemIdxChain) {\n  const [ i ] = itemIdxChain;\n  return formData.persons[i].age \u003c 18;\n}\n\n// global constants\ndisabled: function(formData, constData) {\n  return formData.person.age \u003c constData.max;\n}\n```\n\n## Design Thinking\n\nncform = ncform container + ncform theme standard component\n\n![design](docs/images/design.png)\n\nA system project generally uses a UI library (such as vue) and a UI implementation (such as elementui)\nIn order to live in peace with it, ncform's standard components can use the same UI implementation\n\nThe ncform Vue version provides the standard components of the elementui theme by default [[Click to view]](https://ncform.github.io/ncform/ncform-theme-elementui/index.html)\n\nIf you are a fan of iview, you can develop standard components of the iview theme by following the specifications of the ncform standard components.\n\nThought: \"Throw in\" the standard components of various themes into the ncform container, which is a nice tool for developing forms.\n\n## Schema Generator\n\nYou can accelerate the speed of writing form schemas with [Schema Generator](https://ncform.github.io/ncform/ncform-show/schema-gen/index.html)\n\nAlso you can try the third-party vscode extension: [vscode-plugin-ncform-schema](https://github.com/F-loat/vscode-plugin-ncform-schema/)\n\n## References\n\n- [json-schema](http://json-schema.org/)\n- [jsonform](https://github.com/joshfire/jsonform)\n- [json-editor](https://github.com/jdorn/json-editor)\n- [react-jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form)\n- [angular-schema-form](https://github.com/json-schema-form/angular-schema-form)\n\n## Authors\n\n- [Daniel.xiao](https://github.com/daniel-dx) : ncform designer and main implementer\n- Kyle.lo : The implementer of the ncform form validation part and the main developer of the standard component\n\n## Contributors\n\n\u003ctable\u003e\u003ctr\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/daniel-dx\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/22042268?s=460\u0026v=4\"width=\"100px;\"alt=\"daniel.xiao\"/\u003e\u003cbr/\u003e\u003csub\u003e\u003cb\u003edaniel.xiao\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr/\u003e\u003ca href=\"https://github.com/daniel-dx\"title=\"Author\"\u003e☺️\u003c/a\u003e\u003c/td\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Kyleloh\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/5841513?s=460\u0026v=4\"width=\"100px;\"alt=\"Kyleloh\"/\u003e\u003cbr/\u003e\u003csub\u003e\u003cb\u003eKyleloh\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr/\u003e\u003ca href=\"https://github.com/Kyleloh\"title=\"Developer\"\u003e💻\u003c/a\u003e\u003c/td\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/liuxuewei\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/1960603?s=460\u0026v=4\"width=\"100px;\"alt=\"liuxuewei\"/\u003e\u003cbr/\u003e\u003csub\u003e\u003cb\u003eliuxuewei\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr/\u003e\u003ca href=\"#financial\"title=\"Financial supporter\"\u003e💵\u003c/a\u003e\u003c/td\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/woodytechnology\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/47734092?s=200\u0026v=4\"width=\"100px;\"alt=\"woodytechnology\"/\u003e\u003cbr/\u003e\u003csub\u003e\u003cb\u003ewoodytechnology\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr/\u003e\u003ca href=\"#financial\"title=\"Financial supporter\"\u003e💵\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\n## Sponsor\n\nncform is an MIT licensed open source project and completely free to use. If it is useful for you, you can give me a cup of coffee :).\n\n### One-time donation\n\n[![](docs/images/paypal.jpg)](https://paypal.me/danieldx666)\n\n[![](docs/images/wechat-pay-logo.png)](docs/images/wechat-pay.jpg)\n\n[![](docs/images/alipay-logo.png)](docs/images/alipay-pay.jpg)\n\n### Monthly support\n\n[Become a backer or sponsor via Patreon](https://www.patreon.com/ncform)\n\n## Contribution\nSee [Contributing](contributing.md) Guide.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fncform%2Fncform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fncform%2Fncform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fncform%2Fncform/lists"}