# dyna-form-lib

> Render Reactive Forms dynamically in the Angular Application, based on the configuration read from the JSON.

Latest version **2.1.0** (published 2025-02-04) · 0 weekly downloads

## Install

```sh
npm install dyna-form-lib
pnpm add dyna-form-lib
yarn add dyna-form-lib
bun add dyna-form-lib
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2025-02-04 |
| First published | 2017-08-04 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 526.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | neelavar |

## Links

- npm: https://www.npmjs.com/package/dyna-form-lib
- npm.io page: https://npm.io/package/dyna-form-lib

## Dependencies (1)

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

## Recent versions

- 2.1.0 (latest) — 2025-02-04
- 2.0.9 — 2024-11-20
- 2.0.8 — 2024-09-05
- 2.0.7 — 2024-09-05
- 2.0.6 — 2024-08-30
- 2.0.5 — 2024-08-30
- 2.0.4 — 2024-08-27
- 2.0.3 — 2024-06-25
- 2.0.2-rc.1 — 2024-04-12
- 2.0.1 — 2024-04-12
- 2.0.0 — 2024-02-27
- 0.12.2 — 2023-06-24
- 0.9.0 — 2018-10-25
- 0.8.0 — 2018-09-12
- 0.7.2 — 2018-06-19
- … 19 more at https://npm.io/package/dyna-form-lib/versions

## README

# dyna-form-lib

Render Reactive Forms dynamically in the Angular Application, based on the configuration read from the JSON.

## Using the dyna-form-lib

1. **Install the library**

You can install the library using npm:

```bash
npm install dyna-form-lib
```
2. **In your Angular `app.component`**

Import the `DynaFormComponent`

```typescript
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
// Import the library
import { DynaFormComponent } from 'dyna-form-lib';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,

    // Specify the library as an import
    DynaFormComponent
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})

export class AppComponent { }
```

Once the library is imported, you can use its components, directives and pipes in your Angular application:

```html
<!-- You can now use dyna-form-lib component in app.component.html -->
<h1>
  {{title}}
</h1>
<mlc-dyna-form></mlc-dyna-form>
```

# `dyna-form-lib` Usage Guide

The intent of the `dyna-form-lib` is to provide ability to quickly build model driven Angular Forms using form metadata defined in `json` format. The styling is based on _Google Material Design_ and it is imperative to include the peer dependency of `@angular/material` library in your project.

### Simple Example

```html
<mlc-dyna-form [metadata]="dataModel" (formSubmitted)="handlePayload($event)"> </mlc-dyna-form>
```

The dyna-form is invoked using the `mlc-dyna-form` directive. This directive needs one property `metadata` to be set with the form data model in `json` format. The rendered form has a default `SAVE` button and the output event is captured via `formSubmitted` event. You can then handle the payload in your component (ex: `handlePayload($event)`).

## Model Driven Form - Metadata format

The `mlc-dyna-form` depends on the data model to build the form dynamically.
It is composed of a **Form** and its constituent **Form Elements**. To define a valid model, first define a **Form** and an array of **Form Elements**. Please refer to the list of _Supported Form Elements_ and their detailed documentation reference to define the _Form Elements_ properly.
Remember the _Form_ _metadata_ is always a JS object or `json`.

### Example of a Simple Form

The following is a simple example of a form to collect First Name, Last Name and Email Address data fields.

```JSON
{
  "name": "dmdf-registration",
  "title": "Subscription Registration Form",
  "description": "Subscribe to Register",
  "icon": "note",
  "formElements": [
    {
      "controlType": "textbox",
      "key": "fullName",
      "label": "Name",
      "value": "",
      "required": false,
      "icon": "person",
      "order": 1
    },
    {
      "controlType": "textbox",
      "key": "emailAddress",
      "label": "Email",
      "type": "email",
      "required": true,
      "icon": "mail_outline",
      "order": 2
    },
    {
      "controlType": "checkbox",
      "key": "tosAgreement",
      "required": true,
      "order": 3,
      "label": "I agree to the Terms of Service"
    }
  ]
}
```

## Supported Form Elements / Control Types

There are defined form elements supported in the Dynamic Model Driven Forms Module. The list represents the implementation of _form elements_ along with the _metadata_ definition formats.

| #   | Form Element | Description                                                                                                                                 |   Status    |
| --- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | :---------: |
| 1   | `textbox`    | Textbox input element. Also, additionally define `{ type: <data type> }` to use variants of this element. See below for supported **types** |    AVAILABLE    |
| 2   | `dropdown`   | Dropdown List Box or Select element |    AVAILABLE    |
| 3   | `radio`      | Radio buttons, additionally define `{ type: '<column or row>' }` to arrange the options vertically or horizontally. See examples. |    AVAILABLE    |
| 4   | `checkbox`   | Checkbox with options |    AVAILABLE    |
| 5   | `slider`     | Slider control |    AVAILABLE    |
| 6   | `textarea`   | Textarea input element  |    AVAILABLE    |
| 7   | `toggle`     | Slide Toggle switch element  | AVAILABLE |
| 8   | `text`       | Simple or HTML text display purposes. Use `{type: html}` to enable HTML rendering with custom formatting of text. Default type is text.     |    AVAILABLE    |
| 9   | `group`      | Group of elements to be rendered in a single row    |    AVAILABLE    |
| 10  | `stepper`    | A wizard based multi-page form  | AVAILABLE |
| 11  | `esign`      | Capture users signature via e-Sign |    AVAILABLE    |
| 12  | `table `      | Table element for tabular data representation |    AVAILABLE     |
| 13  | `list `      | List element for list-based data input |    AVAILABLE    |
| 14  | `accordian`      | Expansion Panel form element for collapsible sections | AVAILABLE |
| 15  | `editor`      | WYSIWYG editor |    Coming soon |


### Supported `type`(s) for `textbox` Element

Usage: `{ type:` _< data type >_ `}`

- `date` - Date value (Supported with a Material Calendar UI pop-up / Date Picker)
- `datetime-local` - Localized datetime data type (Chrome supports with a Calendar UI) [Material component not yet available]
- `email` - Email - (RegEx based Validator not yet available)
- `month` - Month (Chrome supports with a Calendar UI) [Material component not yet available]
- `number` - Only number inputs, managed with spinner control
- `password` - Password to hide characters from display, replaced with `*` character
- `search` - Input textbox with a X button at the end to clear the text input
- `tel` - (Not available yet)
- `text` - Default if no type is specified
- `time` - Time value (Chrome supports with Time UI with Spinner control) [Material component not yet available]
- `url` - (Not available yet)
- `week` - Week number (Chrome supports with a Calendar UI) [Material component not yet available]

### Icons

A form could be represented in a list and a representative icon would be necessary (depending on the implementation). Defining an `icon` property along with `name`, `title`, `description` would help to represent the Form with an Icon and its Title.

Form elements could have _optional_ `icon` property as well. This would be helpful, in depicting the form / input elements with icons enhancing the user experience.

> **Note:** Valid icon names can be referred from [Material Design Icons](https://fonts.google.com/icons)

## Additional capabilities

### Example of disabled or non-editable form

```html
<mlc-dyna-form [metadata]="dataModel" (formSubmitted)="handlePayload($event)" [disabled]="true"> </mlc-dyna-form>
```

In this case, the form will not be editable and all the form elements would be in disabled state. This is useful to control the editable capabilities of a form during run-time.

### Example of editable/update form

```html
<mlc-dyna-form [metadata]="dataModel" (formSubmitted)="handlePayload($event)" [update]="true"> </mlc-dyna-form>
```

In this case, instead of `SAVE`, the label for the button would be `UPDATE` and you can provide default `value` for the form elements as below:

```JSON
{
  "controlType": "textbox",
  "key": "firstName",
  "icon": "person",
  "label": "first name",
  "value": "John",
  "required": true,
  "order": 1
}, {
  "controlType": "textbox",
  "key": "initial",
  "label": "middle initial",
  "value": "M",
  "order": 2
}, {
  "controlType": "textbox",
  "key": "lastName",
  "label": "last name",
  "value": "Doe",
  "required": true,
  "order": 3
}
```

### Example of display ONLY form

```html
<mlc-dyna-form [metadata]="dataModel" [displayOnly]="true"> </mlc-dyna-form>
```

This is useful, while displaying the form content (with default data) leveraging the model metadata. The `SAVE` button would now be labeled as `CLOSE`.

## Other examples

### Multiple form elements in a single row

Each form element is rendered in a single row. If you wish to render more than one form element in a same row, then use nested form elements as defined in the following example.

```JSON
{
    "name": "a53-registration",
    "description": "Registration form - Intake",
    "title": "Patient Registration",
    "icon": "local_hospital",
    "formElements": [
      {
          "controlType": "textbox",
          "key": "date",
          "label": "Registration date",
          "type": "date",
          "required": true,
          "order": 1,
          "icon": "today"
      },
      {
          "controlType": "group",
          "group": true,
          "order": 2,
          "elements": [
            {
              "controlType": "textbox",
              "key": "firstName",
              "icon": "person",
              "label": "first name",
              "required": true,
              "order": 1
            }, {
              "controlType": "textbox",
              "key": "initial",
              "label": "middle initial",
              "order": 2
            }, {
              "controlType": "textbox",
              "key": "lastName",
              "label": "last name",
              "required": true,
              "order": 3
            }
          ]
      }
    ]
}
```



### Example of a Table  Form
The following is a simple example of a form to collect table  data fields.
```JSON

{
    "name": "table-sample-form",
    "description": "Example for Table element",
    "title": "Table Sample Form",
    "icon": "table_chart",
    "formElements": [
        {
            "controlType": "table",
            "key": "studentList",
            "label": "Student List",
            "headers": [
                "Name",
                "Age",
                "Grade"
            ],
            "rows": [
                {
                    "Name": "John Doe",
                    "Age": "18",
                    "Grade": "A"
                },
                {
                    "Name": "Jane Smith",
                    "Age": "19",
                    "Grade": "B"
                },
                {
                    "Name": "Bob Johnson",
                    "Age": "17",
                    "Grade": "C"
                }
            ],
            "required": true,
            "order": 1
        }
    ]
}

```

### Example of a Radio
The following is a simple example of a form to collect data as radio button options.

Additionally define `{ type: 'column' }` to arrange the options of radio buttons as vertical arrangment, default value is `row` for the horizontal arrangment.

```JSON
{
  "name": "radio-sample-form",
  "description": "Example for Radio button element",
  "title": "Radio Sample Form",
  "icon": "radio_button_checked",
  "formElements": [
    {
      "control_type": "radio",
      "key": "frequency",
      "label": "Please indicate the frequency at which you experience this level of pain:",
      "required": false,
      "type": "column",
      "order": 4,
      "options": [
        {
          "key": "ra",
          "value": "Rarely"
        },
        {
          "key": "1m",
          "value": "Once a month"
        },
        {
          "key": "1w",
          "value": "Once a week"
        },
        {
          "key": "1d",
          "value": "Once a day"
        },
        {
          "key": "md",
          "value": "More than once a day"
        },
        {
          "key": "cp",
          "value": "Constant pain"
        }
      ]
    }
  ]
}

```

### List element
The following is a simple example of a List.

Additionally, specify { type: 'multiple' } and { type: 'single' } for single and multiple selection, respectively. The default type will be a listing element.

```JSON

{
    "name": "sample-form",
    "title": "Sample Form with List",
    "description": "Data as a list",
    "icon": "list",
    "formElements": [
        {
            "controlType": "list",
            "key": "favoriteColors",
            "label": "Favorite Colors",
            "type": "multiple",
            "items": [
                {
                    "value": "Red"
                },
                {
                    "value": "Blue"
                },
                {
                    "value": "Green"
                },
                {
                    "value": "Yellow"
                }
            ],
            "required": true,
            "order": 1
        }
    ]
}

```

### Accordian or expansion panel
The following is a simple example of a form to collect data fields composed in an accordian.

```JSON

{
    "name": "expansion-panel-sample-form",
    "description": "Example for Expansion Panel element",
    "title": "Expansion Panel Sample Form",
    "icon": "expand_more",
    "formElements": [
        {
            "controlType": "accordian",
            "key": "expansion_data",
            "label": "Expansion Panel",
            "accordian": true,
            "steps": [
              {
                "controlType": "text",
                "key": "q1",
                "type": "html",
                "icon": "assignment_ind",
                "value": "<strong>What describes your profession?</strong>",
                "order": 1
              }, {
                "controlType": "checkbox",
                "key": "student",
                "label": "Student",
                "order": 2
              }, {
                "controlType": "checkbox",
                "key": "teacher",
                "label": "Teacher",
                "order": 3
              }, {
                "controlType": "checkbox",
                "key": "doctor",
                "label": "Doctor",
                "order": 4
              },
            ]
        }
    ]
}


```

### Example of a Stepper
The following is a simple example of a stepper and embedded form to collect data fields.

```JSON

{
    "name": "stepper-sample-form",
    "description": "Example for Stepper element",
    "title": "Stepper Sample Form",
    "icon": "stepper",
    "formElements": [
      {
        "controlType": "stepper",
        "key": "stepperForm",
        "label": "Stepper Form Example",
        "order": 1,
        "stepper": true,
        "steps": [
          {
            "label": "Step-1: Name",
            "order": 1,
            "formElements": [
              {
                "controlType": "textbox",
                "key": "name",
                "icon": "person",
                "label": "Name",
                "required": true,
                "value": "John Doe",
                "order": 1
              }
            ]
          },
          {
            "label": "Step-2: Subscription",
            "order": 2,
            "formElements": [
              {
                "controlType": "checkbox",
                "key": "subscribed",
                "label": "I wish to subscribe to the newsletter.",
                "required": false,
                "value": true,
                "order": 1
              }
            ]
          }
        ]
      }
    ]
  }
```

## License

All rights reserved. Free to use the library as is without any liabilities to the authors.

© Pranava Inc,

 Authors:
- [Prasanna Neelavar](mailto:prasanna@accidentmate.com)
- [Nishchal Shankar](nishchal.shankar@accidentmate.com)

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