ngx-antd-json-schema-form

JSON schema form with ant-design and prsimjs

This plugin uses ng-zorro-antd and prismjs

Demo: https://bhavinpatel04.github.io/ngx-antd-json-schema-form/

Features

Emits the new updated schema when the form value changes

Installation

Install the plugin from npm:

npm install ngx-antd-json-schema-form --save

import NgxAntdJsonSchemaFormModule in your module:

...
import { FormsModule } from '@angular/forms';
import { NgxAntdJsonSchemaFormModule } from 'ngx-antd-json-schema-form';
import { AppComponent } from "./app.component";

@NgModule({
    imports:      [... , FormsModule, NgxAntdJsonSchemaFormModule],
    declarations: [AppComponent],
    bootstrap:    [AppComponent]
})
export class AppModule {}

Add Styles in angular.json:

  ...
  "assets": [...],
  "styles": [
    "node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
    "node_modules/prismjs/themes/prism.css",
    "src/styles.scss"
  ],
  ...

Usage example

The component using this library should have encapsulation: ViewEncapsulation.None

Html:

<ngx-antd-json-schema-form [(schema)]="schema" [settings]="settings" (submit)="submit($event)">
</ngx-antd-json-schema-form>

Typescript:

schema: [
  {
    key: "input",
    label: "input",
    type: "input",
    required: true,
    value: ""
  },
  {
    key: "input-hidden",
    label: "input-hidden",
    type: "input",
    required: true,
    hidden: true,
    value: "blah-blah"
  },
  {
    key: "checkbox",
    label: "checkbox",
    type: "checkbox",
    required: true,
    value: true
  },
  {
    key: "radio",
    label: "radio",
    type: "radio",
    required: true,
    value: "yes",
    options: [
      {
        label: "Yes",
        value: "yes"
      },
      {
        label: "No",
        value: "No"
      }
    ] as FormOption[]
  },
  {
    key: "radio-button",
    label: "radio-button",
    type: "radio-button",
    required: false,
    value: false,
    options: [
      {
        label: "Yes",
        value: true
      },
      {
        label: "No",
        value: false
      }
    ] as FormOption[]
  },
  {
    key: "select",
    label: "select",
    type: "select",
    options: [
      {
        label: "Option 1",
        value: "1"
      },
      {
        label: "Option 2",
        value: "2"
      }
    ] as FormOption[],
    value: "1"
  },
  {
    key: "textarea",
    label: "textarea",
    type: "textarea",
    required: true,
    value: ""
  },
  {
    key: "prism",
    label: "prism",
    type: "prism",
    language: "typescript",
    required: true,
    value:
      '[\n  {\n  "name": "user_id",\n  "isPii": false,\n  },\n  {\n  "name": "user_name",\n  "isPii": true,\n }\n]',
    disabled: true,
    fieldClass: "prism-class"
  },
  {
    key: "icon",
    label: "icon",
    type: "icon",
    required: false,
    value: "any value, does not matter",
    disabled: false,
    icon: {
      type: "check-circle",
      theme: "fill",
      class: "form-icon-class"
    } as FormIcon
  }
] as FormItem[];
settings: FormSettings = {
  fieldClass: "field-class"
};

Options

| Option | Type | Description | | -------- | ------------ | ----------- | | schema | FormItem[] | json schema | | settings | FormSettings | settings |

Item Options

| Option | Type | Description | | ------------- | ------------ | ---------------- | | key | string | key | | label | string | label | | type | string | type | | placeholder | string | placeholder | | options | FormOption[] | Array of options | | disabled | boolean | disabled | | readonly | boolean | readonly | | value | string | value | | required | boolean | required | | language | string | language | | nzGutter | number | nzGutter | | itemClass | string | itemClass | | nzSpanLabel | number | nzSpanLabel | | labelClass | string | labelClass | | nzSpanControl | number | nzSpanControl | | fieldClass | string | fieldClass |

Settings

| Setting | Type | Default | Description | | ------------- | ------ | ------- | ---------------------------------------------- | | nzGutter | number | 8 | nzGutter attr of ng-zorro-antd | | itemClass | string | '' | class for the item | | nzSpanLabel | number | 8 | nzSpan attr of ng-zorro-antd for label | | labelClass | string | '' | class for the item-label | | nzSpanControl | number | 16 | nzSpan attr of ng-zorro-antd for control-field | | fieldClass | string | '' | class for the control-field |

License

MIT