@ng-vcl/jss-form

vcl-jss-form

Creates a html-form from a jsonschema.

Installation

npm install @ng-vcl/jss-form --save

Usage:

import { VCLJssFormModule } from 'ng-vcl';

@NgModule({
  imports: [ VCLJssFormModule ],
  ...
})
export class AppComponent {}

<vcl-jss-form [schema]="mySchema" [(value)]="value"></vcl-jss-form>

example-schema:

{
    "title": "hero schema",
    "description": "describes a simple hero",
    "type": "object",
    "properties": {
      "name": {
        "type": "string",
        "formType": "text",
        "placeholder": "The heroe's name",
        "minLength": 4,
        "maxLength": 100,
      },
      "color": {
        "description": "color defines which team the hero belongs to",
        "label": "team",
        "formType": "select",
        "type": "string",
        "enum": ["#ff0000", "#008000", "#0000FF", "#FFFF00"],
        "items": [
          {
            "label": "Red",
            "value": "#ff0000"
          },
          {
            "label": "Green",
            "value": "#008000"
          },
          {
            "label": "Blue",
            "value": "#0000FF"
          },
          {
            "label": "Yellow",
            "value": "#FFFF00"
          }
        ]
      },
      "color2": {
        "label": "subcolor",
        "formType": "radio",
        "type": "string",
        "enum": ["red", "green", "blue", "yellow"]
      },
      "isleader": {
        "label": "leader",
        "formType": "checkbox",
        "type": "boolean"
      },
      "hp": {
        "type": "number",
        "formType": "slider"
      },
      "alive": {
        "type": "boolean",
        "formType": "switch"
      },
      "mainSkill": {
        "description": "nested object",
        "type": "object",
        "properties": {
          "name": {
            "type": "string",
            "formType": "text",
            "minLength": 1
          },
          "damage": {
            "type": "number",
            "formType": "number",
            "min": 0,
            "max": 100
          }
        },
        "required": ["name", "damage"]
      }
    },
    "required": ["name", "color"]
  };

API

vcl-jss-form properties:

Name	Type	Default	Description
schema	object		a jsonschema to build the form from
value	object	{}	An Object to begin editing with (2-way binding)
error	event		Event-stream which emits schema-errors or null

schema properties

In addition to the generic keywords of jsonschema, vcl-jss-form is using keywords to let you define the generated form.

Name	Type	Default	Description
label	string		a label-string. attributeName will be the default
placeholder	string		define a placeholder which will be sued for the input-field
formType	string		defines the input-type of the form-element. ENUM(text, number, select, switch, slider)

formTypes:

Name	Type	ValueType
text	string	string
select	string	string of enum
radio	string	string of enum
checkbox	string	boolean
switch	string	boolean
number	string	number
slider	string	number

Changelog

0.1.2 (2017-02-17)

Changes

• button-group:
  • Performance optimizations
  • Remove redundant (change) event => use (selectedIndexChange) instead

Bug Fixes

• select: toggle dropdown on button tap