MobiDynamicForm

MobiDynamicForm is an Angular library designed to facilitate the creation of dynamic, step-based forms with a variety of field types. This library allows developers to easily configure form steps and fields, handle validation, and manage form navigation.

Table of Contents

• Installation
• Usage
  • Code Scaffolding
  • Build
  • Publishing
  • Running Unit Tests
• Input Configuration
• Output Emitters
• Further Help

Installation

To install and use MobiDynamicForm in your Angular project, you can include it by following the standard npm installation and Angular module setup procedures.

Usage

Code Scaffolding

Run the following command to generate a new component within the MobiDynamicForm project:

ng generate component component-name --project MobiDynamicForm

You can also generate other Angular elements like directives, pipes, services, etc., using:

ng generate directive|pipe|service|class|guard|interface|enum|module --project MobiDynamicForm

Note: Ensure to add the --project MobiDynamicForm flag; otherwise, the new elements will be added to the default project in your angular.json file.

Build

To build the project, run:

ng build MobiDynamicForm

The build artifacts will be stored in the dist/ directory.

Publishing

After building the library, navigate to the dist/mobi-dynamic-form directory and run:

npm publish

Running Unit Tests

Execute the unit tests via Karma with the following command:

ng test MobiDynamicForm

Input Configuration

The MobiDynamicForm uses the Int_StepConfig interface to configure each step of the form. Below is the structure of this interface:

export interface Int_StepConfig {
  buttonActionText: string;
  fieldType: "datePicker" | "timePicker" | "inputField" | "textArea" | "checkBox" | "radioList" | "dropDown" | "summary";
  field: {
    id: string;
    isRequired?: boolean;
    label: string;
    value: string;
    keyForAPI: string;
    placeholder?: string;
    multiple?: boolean;
    itemList?: Partial<Int_itemList>[];
  };
  label: string;
  inputType?: "text" | "number"; // inputType need to discuss
  order: number;
  minLength?: number;
  maxLength?: number;
  export?: (value: any) => any; // Function to handle exporting a value
  customValidation?: (value: any) => boolean; // Function for custom validation
}

Example Configuration

@Input() stepList: Int_StepConfig[] = [
  {
      buttonActionText: 'Next',
      fieldType: 'datePicker',
      field: {
        isRequired: true,
        label: 'Date',
        value: '',
        placeholder: '',
      },
      label: 'Date',
      order: 0,
    },
    {
      buttonActionText: 'Next',
      fieldType: 'timePicker',
      field: {
        isRequired: true,
        label: 'Time',
        value: '',
        placeholder: '',
      },
      label: 'Time',
      order: 1,
    },
    {
      buttonActionText: 'Next',
      fieldType: 'inputField',
      field: {
        isRequired: true,
        label: 'Input Field',
        value: '',
        placeholder: '',
      },
      label: 'Input Field',
      order: 2,
    },
    {
      buttonActionText: 'Next',
      fieldType: 'textArea',
      field: {
        isRequired: false,
        label: 'Text Area',
        value: '',
        placeholder: 'Enter detailed text here',
      },
      label: 'Text Area',
      order: 3,
    },
    {
      buttonActionText: 'Next',
      fieldType: 'checkBox',
      field: {
        isRequired: false,
        label: 'Check Box',
        value: 'false',
        placeholder: 'Tick if applicable',
        itemList: [
          {
            id: '1',
            label: 'Option 1',
            placeholder: 'First option',
          },
          {
            id: '2',
            label: 'Option 2',
            placeholder: 'Second option',
          },
        ],
      },
      label: 'Check Box',
      order: 4,
    },
    {
      buttonActionText: 'Next',
      fieldType: 'radioList',
      field: {
        isRequired: true,
        label: 'Radio List',
        value: '',
        placeholder: 'Select one option',
        itemList: [
          {
            id: '1',
            label: 'Option 1',
            placeholder: 'First option',
          },
          {
            id: '2',
            label: 'Option 2',
            placeholder: 'Second option',
          },
        ],
      },
      label: 'Radio List',
      order: 5,
    },
    {
      buttonActionText: 'Next',
      fieldType: 'dropDown',
      field: {
        isRequired: true,
        label: 'Drop Down',
        value: '',
        placeholder: 'Select an option',
        itemList: [
          {
            id: '1',
            label: 'Choice 1',
            placeholder: '',
          },
          {
            id: '2',
            label: 'Choice 2',
            placeholder: '',
          },
        ],
      },
      label: 'Drop Down',
      order: 6,
    },
    {
      buttonActionText: 'Done',
      fieldType: 'summary',
      field: {
        isRequired: true,
        label: 'Summary',
        value: '',
        placeholder: 'Review your details',
      },
      label: 'Summary',
      order: 8,
    },

  // Additional step configurations
];

Usage

Make Sure to mention in module

Use as Selector

Output Emitters

The following output emitters are provided for handling form actions:

• submitEmitter: Triggered when the form is submitted.
• nextEmitter: Triggered when the user proceeds to the next step.
• prevEmitter: Triggered when the user returns to the previous step.
• errorEmitter: Triggered when there is a validation or process error.

@Output() submitEmitter = new EventEmitter();
@Output() nextEmitter = new EventEmitter();
@Output() prevEmitter = new EventEmitter();
@Output() errorEmitter = new EventEmitter();

These emitters allow you to capture and handle various form events, enabling a seamless user experience.

Emitter Response

onSubmit

{
"messages": [
{
"label": "Select Host",
"value": {
"id": "919925030186",
"label": "Dipen"
},
"order": 0,
"keyForAPI": "whomToMeet",
"isRequired": true,
"fieldType": "dropDown"
}
],
"actionName": ""
}

Further Help

For more help with the Angular CLI, use ng help or visit the Angular CLI Overview and Command Reference page.

This README provides a quick start guide and configuration details for working with the MobiDynamicForm library. For detailed documentation and more advanced usage, refer to the official Angular and TypeScript documentation.