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:

npm install dyna-form-lib

2. In your Angular app.component

Import the DynaFormComponent

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:

<!-- 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

<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.

{
  "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

Additional capabilities

Example of disabled or non-editable form

<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

<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:

{
  "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

<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.

{
    "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.

{
    "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.

{
  "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.

{
    "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.

{
    "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.

{
    "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
• Nishchal Shankar