aurelia-json-schema-form
Build aurelia forms based on JSON schema! All built-in templates are styled with bootstrap 4.1.1
Use
- installation
npm install aurelia-json-schema-form
- make sure to also install the peer dependencies:
npm install aurelia-validation
npm install bootstrap jquery popper.js
(only required if you are using the built-in templates)
- reference the plugin in your aurelia bootstrapper entry point
main.ts/js
aurelia.use.plugin(PLATFORM.moduleName("aurelia-json-schema-form")
- customize the plugin by specifying
PluginOptions
configuration function- change the validation renderer
- change templates
- change validation messages
- change log level
- add an
<au-json-schema-form/>
element:- Schema declaration:schema =
- Form declaration:form: IFormOverride =// match the property key of your json schema, provide optional nested properties/overridesfirstName: $noTitle: true// keys leading with $ are override options$noSeparator: true// keys leading with @ are emmet like containers to provide layouting, see below Features for details// the value is always an array of objects"@div.row":"@div.col":firstName: {}"@div.col":lastName: {}// you can use void elements as well"@hr":// _element is BYO element option, see below Features for details"_element":elementName: "task-list"
- Add the custom element to your view
- Schema declaration:
Features
- Supported schema types:
- string
- number
- array
- object
- boolean
- All schema types can be nested in array/object
- Default value population (even if not exposed in form) using default/const
- Emmet-like custom element containers! Wrap form elements in an emmet key (supports
@element#id.class.class
syntax)"@div.col": - BYO element
schemaKey
is optional, it will bindschema
andmodel
to your element- validation does not occur on this schema key, you must perform your own validation
- use:
- create element i.e.
my-custom-element.ts
&my-custom-element.html
- add element as a global resource in your bootstrapper/featureaureliause
- add
_element
key to your form overrides
- create element i.e.
Running the sample
- install aurelia cli globally
npm i -g aurelia-cli
- clone repo and run
npm install
- run
au run
- open browser to http://localhost:8080
Coming soon/Need help with..
- optionally delete items from model on destroy
- bootstrap templates:
- add date/time/date-time pickers
- add materialize templates
- add additional schema validation (maybe ajv)
- ability to declare keys you want to include/exclude for an easy, generic form
Contributing
Want to help? Submit a PR for an item above.