Ng-Json-Powered-Form npm Package

We noticed that for projects like a portal / dashboard developers need to create several forms again and again. So we thought of something that could make it     much more easier and leaving our html code cleaner and we came up with this. 
This library takes in a json file and gives you a form, so you dont need to create any forms in your projects anymore.

Installation

npm install --save ng-json-powered-form

Consuming this library

This library presently supports

input 
radio
select
textarea
button

Import package module into your App module

import { NgDynamicFormModule } from 'ng-json-powered-form';

imports: [ NgDynamicFormModule ]

Add ng-dynamic-form Selector to your component.

RegisterForm.component.html

<ng-dynamic-form (formChange)="OnformChange($event)" (onFormSubmit)="onFormSubmit($event)" [formData]="regdFormData"></ng-dynamic-form>

Required Meta Data

Input formData :- Json schema for generate the form
@Input form: FormGroup; //optinal 
@Output formChange - Method for handle form changes
@Output onFormSubmit - Method for submit the form

ex-:

regdFormData = RegisterForm;
form: FormGroup;

 OnformChange(event) {
  console.log("OnformChange.....", event);
}

onFormSubmit(event) {
console.log("onFormSubmit.....", event);
}

Craete your Json Schema

Example

RegisterFormConfig.ts

import { formConfig } from 'ng-json-powered-form';

export const RegisterFormData: formConfig[] = [
    {
        controlName: 'Username', // Name of the field
        controlType: 'text',     // Type of the control e.g -: text,select,radio
        valueType: 'text',       // Input Type eg, text, password, date etc
        placeholder: 'Enter username',
        hidden:false,
        validators: {
            required: true,
            minlength: 5
        },
        defaultValue: "[email protected]",
        listeners:{
          click: {
            methodName: "onClickUserName",
            param: 'Data'
          },
          change: {
            methodName: "onChangeUserName",
            param: 'Data'
          },
        },
        order: 2
    },
    {
        controlName: 'Password',
        controlType: 'text',
        valueType: 'password',
        placeholder: 'Enter Password',
        validators: {
            required: false,
            minlength: 5
        },
        listeners:{
          click: {
            methodName: "onClickPass",
            param: 'Data'
          },
        },
        order: 3
    },
    {
        controlName: 'Email',
        valueType: 'email',
        placeholder: 'Enter email',
        controlType: 'text',
        validators: {
            required: true,
            minlength: 6,
            maxlength: 50,
            email: true
        },
        order: 1
    },
    {
        controlName: 'Gender',
        placeholder: 'Select gender',
        controlType: 'select',
        options: [{
            optionName: 'Male',
            value: 'male'
        }, {
            optionName: 'Female',
            value: 'female'
        }],
        validators: {
            required: true
        },
        listeners:{
          click: {
            methodName: "onClickGender",
            param: 'Data'
          },
        },
        order: 4
    },
    {
        controlName: 'Vehicle you own',
        placeholder: 'Select vehicle',
        controlType: 'radio',
        options: [
            {
                optionName: 'Yes',
                value: 'Yes'
            },
            {
                optionName: 'No',
                value: 'No'
            },
            {
                optionName: 'Both',
                value: 'Both'
            }
        ],
        defaultValue: "Yes",
        validators: {
            required: true
        },
        order: 5
    },
    {
        controlName: 'SubmitButton',
        placeholder: 'Submit',
        controlType: 'button',
        buttonType: 'button',
        addClass: 'btn btn-primary',
        listeners:{
          click: {
            methodName: "OnSubmitButton",
            param: 'Data'
          },
        }
    }
];

Provide Required Config To Component

RegisterForm.component.ts

// DynamicallyGenerateMethod - This Method Dynamically Import All Handler Method Provide in Json schema

// import this method into your component ngOninit Hook.
// This method have dependancy of ElementRef provided by Angular itself.


Example -:

import { Component, OnInit, ElementRef } from "@angular/core";
import { TemplateService } from 'ng-json-powered-form';
import { RegisterFormData } from "./registerData";  //json Schema File
import { FormGroup } from "@angular/forms";

constructor(
  private elRef: ElementRef,
  private tempservice: TemplateService
) { }

regdFormData = RegisterFormData;
form: FormGroup;

ngOnInit(){
    this.tempservice.DynamicallyGenerateMethod(this.regdFormData).subscribe((res: any[]) => {
      console.log("DynamicallyGenerateMethod===", res);
      for (let index in res) {
        if (this[res[index]["method"]]) {
          this.elRef.nativeElement.querySelector(`#${res[index]["ctrl"]}`).addEventListener(res[index]['handler'], this[res[index]["method"]].bind(this));
        } else {
          console.log(`%c ERROR : ${res[index]["method"]} Method Not Found===`, 'background: #fff; color: #ff0000');
        }
      }
    });
 }

changeUI Method used to manupulate dom element

##  RegisterForm.component.ts
// onChangeUserName Method which is provided in RegisterForm Json Schema File
onChangeUserName(){
    this.tempservice.changeUI(this.regdFormData, ["Username", "Password"],"disabled",true );
}

Json Schema Config

export interface formConfig {
    submit?: string;
    controlName?: string;  // Name of the field
    controlType?: string;  // E.g- text,select,radio
    valueType?: string;    // type of inptut field text or password 
    hidden?:boolean;        
    disabled?:boolean;
    defaultValue?: string;  
    order?: number;
    placeholder?: string;
    buttonType?: string;     // Button Type button or submit
    options?: Array<{        // for radio and select field
      optionName: string;
      value: string;
    }>;
    validators?: {
      required?: boolean;
      minlength?: number;
      maxlength?: number;
      email?: boolean;
    };
    addClass?: string;
    listeners?: {
      click?:{
        methodName:string,
        param?:any
      },
      change?:{
        methodName:string,
        param?:any
      }
    }
  }

// Development

For see the result run
$ ng serve

// Deployment

To generate all *.js, *.d.ts and *.metadata.json files run

$ npm run build