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:

`typescript
...
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:

`html


`

Typescript:

`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