Converts JSON objects into Angular reactive forms and returns FormGroup.

Ionic Global Form is a dynamic npm package, simplifying the process of form creation in Ionic applications. The package supports various form controls such as input fields, checkboxes, date pickers, dropdowns, and more, each equipped with custom validations. Unique to Ionic Global Form is the support for form arrays, which enables efficient grouping of dynamic fields.

In essence, Ionic Global Form enhances your form creation process, supports continuous integration and delivery pipelines, and ensures a better user experience. It's an invaluable addition to any Ionic project.

Easy Real-time Form Updates with Ionic Global Form: No App Store Re-submissions

Ionic Global Form offers a significant advantage by allowing real-time form updates based on backend configurations. You no longer need to manually update the application or push new versions to the app store or play store for each form change. This simplifies the process and saves a lot of development time.

Prerequisites

To use the Ionic Global Form package, make sure your development environment meets the following prerequisites:

1. Angular: You need to have Angular version 15 or later installed. You can check your version by running ng version in your terminal. If you do not have Angular installed or your version is outdated, follow the instructions provided in the Angular Setup Guide to install or update it.

2. Ionic: Ionic is a required framework for this package. If you haven't installed Ionic, you can do so by running npm install -g @ionic/cli in your terminal.

3. Node.js: Make sure you have Node.js installed, as it's required to manage your npm packages. The recommended version is 10.13 or later.

4. npm: Node Package Manager (npm) is used to install the Ionic Global Form package. If you installed Node.js from the official website, npm is included. You can check your npm version by running npm -v in your terminal.

Once these prerequisites are fulfilled, you are ready to install and use the Ionic Global Form package.

Installation

To use the Dynamic Form Generator in your project, install it via npm:

npm i ionic-global-form --save

Usage

The package is intended to be used with Ionic forms.

Import the necessary types and enums from the package in your Ionic component:

import { ComponentEnum, ValidatorsListEnum, FieldDataInterface, FormDataInterface, ValidationRule } from 'dynamic-form-generator';

Define your form data:

const formData: FormDataInterface[] = [
  // your form fields here
];

Then, in your HTML template, use the form controls provided by the package:

<ion-content [fullscreen]="true">
 <lib-ionic-global-form
  [formData]="formData"
  (formChange)="formChangeFn($event)"
  (formSubmit)="formSubmitFn($event)"
  (openModal)="openModalFn($event)"
  [modalData]="modalData"
></lib-ionic-global-form>
</ion-content>

const formData: FormData[] = [
  {
    // Input Field
    fieldCode: 'inputField',
    fieldName: 'Input Field',
    componentType: ComponentEnum.Input,
    type: 'text',
    placeholder: 'Enter text',
    disabled: false,
    hidden: false,
    fieldValue: '',
    validations: [
      { type: ValidatorsListEnum.REQUIRED },
      { type: ValidatorsListEnum.MAXLENGTH, maxLength: 10 }
    ]
  },
  {
    // Select Field
    fieldCode: 'selectField',
    fieldName: 'Select Field',
    componentType: ComponentEnum.Select,
    dropdownOptions: [
      { value: 'option1', id: '1' },
      { value: 'option2', id: '2' },
      { value: 'option3', id: '3' }
    ],
    disabled: false,
    hidden: false,
    fieldValue: '',
    validations: [{ type: ValidatorsListEnum.REQUIRED }]
  },
  {
    // Multi-Select Field
    fieldCode: 'multiSelectField',
    fieldName: 'Multi-Select Field',
    componentType: ComponentEnum.multiSelect,
    dropdownOptions: [
      { value: 'option1', id: '1' },
      { value: 'option2', id: '2' },
      { value: 'option3', id: '3' }
    ],
    disabled: false,
    hidden: false,
    fieldValue: [],
    validations: [{ type: ValidatorsListEnum.REQUIRED }]
  },
  {
    // Radio Group Field
    fieldCode: 'radioGroupField',
    fieldName: 'Radio Group Field',
    componentType: ComponentEnum.RadioGroup,
    dropdownOptions: [
      { value: 'option1', id: '1' },
      { value: 'option2', id: '2' },
      { value: 'option3', id: '3' }
    ],
    disabled: false,
    hidden: false,
    fieldValue: '',
    validations: [{ type: ValidatorsListEnum.REQUIRED }]
  },
  {
    // Form Array Field
    fieldCode: 'formArrayField',
    fieldName: 'Form Array Field',
    componentType: ComponentEnum.FormArray,
    formArrayFields: [
      {
        // Nested Input Field
        fieldCode: 'nestedInputField',
        fieldName: 'Nested Input Field',
        componentType: ComponentEnum.Input,
        type: 'text',
        placeholder: 'Enter nested text',
        disabled: false,
        hidden: false,
        fieldValue: '',
        validations: [{ type: ValidatorsListEnum.REQUIRED }]
      }
    ],
    formArrayGroupName: 'nestedFields',
    intialFormArrayLength: 1,
    disabled: false,
    hidden: false,
    fieldValue: [],
    validations: []
  },
  {
    // Modal Field
    fieldCode: 'modalField',
    fieldName: 'Modal Field',
    componentType: ComponentEnum.modal,
    modalCode: 'sampleModal',
    modalOptions: {
      isFormArray: false,
      isPerson: false
    },
    disabled: false,
    hidden: false,
    fieldValue: null,
    validations: []
  },
  {
    // Text Area Field
    fieldCode: 'textAreaField',
    fieldName: 'Text Area Field',
    componentType: ComponentEnum.TextArea,
    placeholder: 'Enter text',
    rows: 4,
    disabled: false,
    hidden: false,
    fieldValue: '',
    validations: [{ type: ValidatorsListEnum.REQUIRED }]
  },
  {
    // Connected Selectors Field
    fieldCode: 'connectedSelectorsField',
    fieldName: 'Connected Selectors Field',
    componentType: ComponentEnum.ConnectedSelectors,
    connectedSelectors: [
      {
        fieldCode: 'selector1',
        fieldName: 'Selector 1',
        fieldValue: '',
        placeholder: 'Select option',
        options: [
          { value: 'option1', id: '1', parentId: 'parent1' },
          { value: 'option2', id: '2', parentId: 'parent2' },
          { value: 'option3', id: '3', parentId: 'parent3' }
        ]
      },
      {
        fieldCode: 'selector2',
        fieldName: 'Selector 2',
        fieldValue: '',
        placeholder: 'Select option',
        options: [
          { value: 'option4', id: '4', parentId: 'parent1' },
          { value: 'option5', id: '5', parentId: 'parent2' },
          { value: 'option6', id: '6', parentId: 'parent3' }
        ]
      }
    ],
    disabled: false,
    hidden: false,
    fieldValue: '',
    validations: [{ type: ValidatorsListEnum.REQUIRED }]
  },
  {
    // Date Field
    fieldCode: 'dateField',
    fieldName: 'Date Field',
    componentType: ComponentEnum.Input,
    type: 'date',
    placeholder: 'Select date',
    disabled: false,
    hidden: false,
    fieldValue: '',
    validations: [{ type: ValidatorsListEnum.REQUIRED }]
  }
];

The form controls are rendered dynamically based on the componentType of each field in the form data.

export enum ComponentEnum {
  Input = 'input',
  TextArea = 'textArea',
  Select = 'select',
  multiSelect = 'multiSelect',
  CheckBox = 'checkBox',
  RadioGroup = 'radioGroup',
  DatePicker = 'datePicker',
  ChipField = 'chipField',
  SingleFileUpload = 'singleFileUpload',
  MultipleFileUpload = 'multipleFileUpload',
  ConnectedSelectors = 'connectedSelectors',
  SlideToggle = 'slideToggle',
  FormArray = 'formArray',
  modal = 'modal',
}

ComponentEnum is an enumeration (Enum) that is used to specify the type of each field in the form. This enumeration is used to dynamically render form fields based on the form configuration that you provide.

Here is an explanation of each value in the ComponentEnum:

• Input: Represents an input field. It's used to get single-line input from the user. You can specify the type of input such as 'text', 'number', 'email', 'date', etc.

• TextArea: Represents a text area field. It's used to get multiline input from the user.

• Select: Represents a select field or dropdown. It's used when you want the user to select one option from a list of options.

• multiSelect: Represents a multi-select field. It's used when you want the user to select multiple options from a list.

• CheckBox: Represents a checkbox field. It's used when you want the user to select multiple options from a list of checkboxes.

• RadioGroup: Represents a group of radio buttons. It's used when you want the user to select one option from a list of radio buttons.

• DatePicker: Represents a date picker field. It's used when you want the user to select a date.

• ChipField: Represents a chip field. It's used when you want to present a list of options as a group of chips from which the user can select one or more.

• SingleFileUpload: Represents a single file upload field. It's used when you want the user to upload a single file.

• MultipleFileUpload: Represents a multiple file upload field. It's used when you want the user to upload multiple files.

• ConnectedSelectors: Represents connected selectors field. It's used when you want the user to select options from connected dropdowns where the options of one dropdown depend on the selection of the previous one.

• SlideToggle: Represents a slide toggle or switch field. It's used when you want the user to choose between two options, typically yes/no or on/off.

• FormArray: Represents a form array field. It's used when you want to group multiple similar fields together. This is helpful when you want to generate a dynamic number of similar fields.

• modal: Represents a modal field. It's used when you want to open a modal dialog for user input.

In your form data configuration, for each field, you specify the componentType using one of the values from the ComponentEnum. The dynamic form generator then uses this configuration to render the form with the correct types of input fields.

export enum ValidatorsListEnum {
  REQUIRED = 'required',
  EMAIL = 'email',
  PATTERN = 'pattern',
  MIN = 'min',
  MAX = 'max',
  MINLENGTH = 'minLength',
  MAXLENGTH = 'maxLength',
  CUSTOM = 'custom',
}

The ValidationRule type in your TypeScript code is an essential aspect for form validation. It is a union type that allows for different rule structures based on the type of validation you want to apply to a form field. Let's elaborate on this:

Each ValidationRule object has a type property which corresponds to one of the values in the ValidatorsListEnum. This indicates the kind of validation that will be applied to the form field. Below are the different forms a ValidationRule can take:

1. Required validation: { type: ValidatorsListEnum.REQUIRED } - This rule indicates that the field is required and must be filled in.

2. Email validation: { type: ValidatorsListEnum.EMAIL } - This rule checks if the field value is a valid email.

3. Pattern validation: { type: ValidatorsListEnum.PATTERN; pattern: string } - This rule checks if the field value matches the provided regular expression pattern.

4. Min validation: { type: ValidatorsListEnum.MIN; minValue: number } - This rule ensures the field value is not less than the provided minimum value. It is typically used for number input fields.

5. Max validation: { type: ValidatorsListEnum.MAX; maxValue: number } - This rule ensures the field value does not exceed the provided maximum value. It is typically used for number input fields.

6. MinLength validation: { type: ValidatorsListEnum.MINLENGTH; minLength: number } - This rule checks if the length of the field value is not less than the provided minimum length.

7. MaxLength validation: { type: ValidatorsListEnum.MAXLENGTH; maxLength: number } - This rule checks if the length of the field value does not exceed the provided maximum length.

8. Custom validation: This is a special case where you can provide a custom validation function. The function should take an AbstractControl object and return a validation error object or null.

   Example:

   type CustomValidationRule = {
     type: ValidatorsListEnum.CUSTOM;
     validate: (control: AbstractControl) => {
       custom: true;
       message: string;
     } | null;
   };

   The custom validation function (validate in the object above) should return an object with custom: true and a message string when validation fails, and null when validation passes. The message will be used to provide the user with information about the validation error.

By providing these various rules, your form fields can be equipped with robust and flexible validation that suits your application's needs.

Contact Information

If you have any queries or feedback regarding the Ionic Global Form package, you can reach out to us through the following channels:

• Email: [email protected]

We're looking forward to hearing from you and are always ready to assist you!

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT