项目作者: jbockle

项目描述 :
Create functional UI forms using json schema
高级语言: TypeScript
项目地址: git://github.com/jbockle/au-jsonschema-form.git
创建时间: 2018-11-10T22:27:51Z
项目社区:https://github.com/jbockle/au-jsonschema-form

开源协议:MIT License

下载








NPM Status


Bundlephobia

Aurelia JSON Schema Forms

Documentation and Examples

This project is still very much in alpha! use at your own risk!

Create forms based on json-schema specification! Heavily influenced by the react-jsonschema-form library, but with many things abstracted into custom views for layouting/theming.

Using ajv for model validation, @aujsf supports draft-04,draft-06, and draft-07.

Theming is a first class citizen!

Installation

  1. Install core dependencies: npm install @aujsf/core ajv jsonpointerx
  2. Install a theme (or create your own): npm install @aujsf/bootstrap-theme
  3. Register the plugin:

    1. // main.ts
    2. import { Aurelia, PLATFORM } from 'aurelia-framework';
    3. import { IPluginOptions } from '@aujsf/core';
    4. import { THEME } from '@aujsf/bootstrap-theme';
    5. export function configure(aurelia: Aurelia): void {
    6. aurelia.use
    7. .standardConfiguration()
    8. .plugin(PLATFORM.moduleName('@aujsf/core'), (options: IPluginOptions) => options.defaultTheme = THEME);
    9. aurelia.use.developmentLogging('debug');
    10. aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
    11. }

Use

  1. <json-schema-form schema.bind="jsonSchema"
  2. ui-schema.bind="uiSchema"
  3. value.bind="model"
  4. submit.call="submit(value, validationResult)"></json-schema-form>
  1. import { UISchema, FormOptions, JsonSchema, ValidationResult } from '@aujsf/core';
  2. export class MyComponent {
  3. jsonSchema: JsonSchema = {
  4. type: 'object',
  5. properties: {
  6. firstName: {
  7. type: 'string'
  8. },
  9. lastName: {
  10. type: 'string'
  11. }
  12. },
  13. required: ['firstName', 'lastName']
  14. };
  15. uiSchema: UISchema = {
  16. 'ui:title': 'User',
  17. lastName: {
  18. 'ui:title': 'Sur Name'
  19. }
  20. };
  21. model: any = {};
  22. submit(value: any, validationResult: ValidationResult): void {
  23. if (validationResult.valid) {
  24. alert('valid:submitted!' + JSON.stringify(value, null, 2));
  25. } else {
  26. alert('invalid :(' + JSON.stringify(validationResult, null, 2));
  27. }
  28. }
  29. }