# ngx-antd-json-schema-form

> JSON form schema using ant-design and prismjs

Latest version **1.0.8** (published 2019-04-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-antd-json-schema-form
pnpm add ngx-antd-json-schema-form
yarn add ngx-antd-json-schema-form
bun add ngx-antd-json-schema-form
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2019-04-23 |
| First published | 2019-02-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 497.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Bhavin Patel |
| Maintainers | bhavinpatel |
| Keywords | angular, angular2, angular4, angular5, angular6, angular7, ng2, ng4, ng5, ng7, ngx, json-schema-form, antd |

## Links

- npm: https://www.npmjs.com/package/ngx-antd-json-schema-form
- Repository: https://github.com/BhavinPatel04/ngx-antd-json-schema-form
- Issues: https://github.com/BhavinPatel04/ngx-antd-json-schema-form/issues
- npm.io page: https://npm.io/package/ngx-antd-json-schema-form

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.8 (latest) — 2019-04-23
- 1.0.7 — 2019-03-22
- 1.0.6 — 2019-03-19
- 1.0.5 — 2019-03-15
- 1.0.4 — 2019-03-13
- 1.0.3 — 2019-03-13
- 1.0.2 — 2019-03-12
- 1.0.1 — 2019-02-15
- 1.0.0 — 2019-02-14
- 0.0.1 — 2019-02-12

## README

# ngx-antd-json-schema-form

> JSON schema form with ant-design and prsimjs

[![Build Status](https://travis-ci.org/BhavinPatel04/ngx-antd-json-schema-form.svg?branch=master)](https://travis-ci.org/BhavinPatel04/ngx-antd-json-schema-form)
[![npm version](https://badge.fury.io/js/ngx-antd-json-schema-form.svg)](https://badge.fury.io/js/ngx-antd-json-schema-form)

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
<ngx-antd-json-schema-form [(schema)]="schema" [settings]="settings" (submit)="submit($event)">
</ngx-antd-json-schema-form>
```

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](https://github.com/BhavinPatel04/ngx-antd-json-schema-form/blob/master/LICENSE)

MIT

---
_Source: https://npm.io/package/ngx-antd-json-schema-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._