# semantica-dynamic-form-generator
> A dynamic form generator
Latest version **1.0.0** (published 2017-06-22) · ISC license · 0 weekly downloads
## Install
```sh
npm install semantica-dynamic-form-generator
pnpm add semantica-dynamic-form-generator
yarn add semantica-dynamic-form-generator
bun add semantica-dynamic-form-generator
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-06-22 |
| First published | 2017-06-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Known vulnerabilities | 0 (+13 in 2 direct dependencies) |
| Install scripts | no |
| Author | Dennis |
| Maintainers | dennissemantica |
## Links
- npm: https://www.npmjs.com/package/semantica-dynamic-form-generator
- npm.io page: https://npm.io/package/semantica-dynamic-form-generator
## Dependencies (7)
- [hammerjs](https://npm.io/package/hammerjs.md) ^2.0.8
- [@angular/core](https://npm.io/package/@angular/core.md) ^4.2.3
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^4.2.3
- [@angular/common](https://npm.io/package/@angular/common.md) ^4.2.3
- [@angular/animations](https://npm.io/package/@angular/animations.md) ^4.2.3
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^4.2.3
- [semantica-material-datepicker](https://npm.io/package/semantica-material-datepicker.md) ^1.0.1
## Recent versions
- 1.0.0 (latest) — 2017-06-22
## README
# Angular Form Generator
  
A dynamic form generator for Angular with material design
## Installation
//TODO
```
npm install @angular/material
npm install angular-form-generator
```
## Setup
Import the FormGenerator Module and add it to the 'imports' of your module
```
import { FormGeneratorModule } from 'angular-form-generator';
@NgModule({
imports: [FormGeneratorModule],
...
})
export YourModule { }
```
Set a link to a material theme in the `````` tag of index.html at the root of your application
```
```
## Form Configuration
The form configuration is a json object that consists of required and optional parameters.
```
{
"formId": '123456Test',
"form": 'animals',
"type": 'lion',
"version": 'v1',
"pages":[
{
"title": "Title",
"groups": [
{
"orientation": 0,
"fields": [
{
"fieldName": 'field',
"type": 'text'
}
]
}
]
}
]
}
```
[The full form configuration documentation.](FORMCONFIG.md)
## Usage
Create a new formConfig object. This will set all the required parameters to their default.
```
let formConfig = new FormConfig(formConfigJson);
```
Insert the `````` inside your components html.
```
```
## Form component
The inputs and outputs.
| Parameter | Type | Description | Kind | |
|---|---|---|---|---|
| page | Page | Insert a page object the form generator has to build | Input | Required |
| data | any | Insert an object with the already filled in data. Make sure that the fieldName in the formConfig follow the path in the data object. [Example](#data-example) | Input | Optional |
| lov | Array key value pair | If the form has dropdowns that contain standard lovs | Input | Optional |
| readonly | boolean | Set if the whole form is readonly or not. Default: false | Input | Optional |
| focusChanged | EventEmitter | Emits an event wheter a form control is focused or blured | Output | Optional |
| registerForm | EventEmiiter | Emits an event when a new form is build. Returns a FormGroup | Output | Optional |
| next | EventEmitter | Emits an event when a button with type button is clicked | Output | Optional |
| submit | EventEmitter | Emits an event when a button with type submit is clicked | Output | Optional |
### Data example
A data object example:
```
{
information: {
firstName: "Donald",
lastName: "Duck"
},
answers: {
age: 10,
height: "1.80 m"
}
}
```
A compatible formConfig object:
```
{
"formId": '123456Test',
"form": 'animals',
"type": 'lion',
"version": 'v1',
"pages":[
{
"title": "Title",
"groups": [
{
"orientation": 0,
"fields": [
{
"fieldName": 'answers.age',
"type": 'number'
},
{
"fieldName": 'answers.height',
"type": 'text'
}
]
}
]
}
]
}
```
---
_Source: https://npm.io/package/semantica-dynamic-form-generator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._