Natural Potato Magnet

    aurelia-json-schema-form
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.8 • Public • Published

    aurelia-json-schema-form

    License: MIT npm Build status

    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 = {
          "type": "object",
          "properties": {
            "firstName": {
              "type": "string"
            },
            "lastName": {
              "type": "string"
            }
          },
          "required": [
            "firstName",
            "lastName"
          ]
        }
      • Form declaration:
        form: IFormOverride = {
          // match the property key of your json schema, provide optional nested properties/overrides
          firstName: {$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
        <au-json-schema-form schema.bind="schema" form.bind="form" model.two-way="model" options.bind="{validateOnRender: true}"></au-json-schema-form>

    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"[
        {
          state: {}
        }
      ]
    • BYO element
      • schemaKey is optional, it will bind schema and model 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/feature
          aurelia.use.globalResources(PLATFORM.moduleName("../path/to/my-custom-element"))
        • add _element key to your form overrides
          {
            _element: {
              elementName: "my-custom-element",
              schemaKey: "firstName"
            }
          }

    Running the sample

    1. install aurelia cli globally npm i -g aurelia-cli
    2. clone repo and run npm install
    3. run au run
    4. 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.

    Install

    npm i aurelia-json-schema-form

    DownloadsWeekly Downloads

    3

    Version

    2.3.8

    License

    MIT

    Unpacked Size

    1.34 MB

    Total Files

    493

    Last publish

    Collaborators

    • jbockle