# json-dynamic-form

> JSON Dynamic form for Angular

Latest version **0.0.5** (published 2018-11-01) · 0 weekly downloads

## Install

```sh
npm install json-dynamic-form
pnpm add json-dynamic-form
yarn add json-dynamic-form
bun add json-dynamic-form
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2018-11-01 |
| First published | 2018-11-01 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 532.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Fredrik Lahode |
| Maintainers | astrobob |
| Keywords | angular, bootstap, angular7 |

## Links

- npm: https://www.npmjs.com/package/json-dynamic-form
- Homepage: https://github.com/lahode/jdf-demo
- npm.io page: https://npm.io/package/json-dynamic-form

## Dependencies (1)

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

## Recent versions

- 0.0.5 (latest) — 2018-11-01
- 0.0.4 — 2018-11-01
- 0.0.3 — 2018-11-01
- 0.0.2 — 2018-11-01
- 0.0.1 — 2018-11-01

## README

# JSON Dynamic form

Have you ever dream building your form just by passing some JSON configuration from your server to Angular.
If the answer is yes, this project is maybe for you!

Thanks to Ted Motto's post [Configurable Reactive Forms in Angular with dynamic components](https://toddmotto.com/angular-dynamic-components-forms), I adapted his project to be able to pass a JSON file.

## How does it work

1) app.module

Import the module and config file

```
import { JsonDynamicFormModule } from 'json-dynamic-form';
import { JsonDynamicFormConfig } from 'json-dynamic-form';
```

Tell your module where to fetch your JSON files

```
const JsonDynamicFormConfig: JsonDynamicFormConfig = {
  serverPath: 'http://localhost:4200/assets/'
};
```

Declare your the Dynamic Form Module

```
imports: [
  JsonDynamicFormModule.forRoot(JsonDynamicFormConfig)
]
````

2) Create a JSON file

See examples in the assets folder


2) Display your forms

```
  <jdf-dynamic-form
    formName="login"
    #form="jdfDynamicForm"
    (submit)="submit($event)">
  </jdf-dynamic-form>
```

N.B: - formName must be the name of your JSON file
     - variable "form" retrieves your form object in your component

That's it!

## Notes

The project support basic validation, several types of HTML form elements, wrapping, adding classes, etc.

Of course, feel free to propose any evolution.

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