Angular Dynamic Form Builder

This is an Angular plugin that generates form dynamically using the JSON.

Working Demo : https://stackblitz.com/edit/nz-form-builder

Note :

This Library has 2 Journeys (Create and Update) .

If the journey is CREATE , then an empty form is initialized according to the JSON.

If the journey is UPDATE , then pass dataToUpdate in the format defined below , so that form will initialize and patch the edit values.

Features.

• Dynamic form building by providing JSON
• Configuration for all input types and styles allowed
• Your custom validation patterns and messages
• Custom form generation with custom labels

Install

npm install nz-form-builder --save

Setup

Step1 : Import FormBuilderModule from the package nz-form-builder in app.module.ts file.

import { FormBuilderModule } from  'nz-form-builder'

Step2 : Add the FormBuilderModule in the NgModule Imports array.

imports: [FormBuilderModule]

Step3 : Add the following tags in the app.component.ts file.

<nz-form-builder  [fieldConfig]="fieldConfig" 
                  [formConfig]="formConfig"
                  (formValues)="onSubmit($event)" 
                  [journey]="journey"
                  [dataToUpdate]="dataToUpdate">
</nz-form-builder>

Pass fieldConfig, formConfig JSON to the library Create a method onSubmit() on the event formValues Pass Journey to the library pass dataToUpdate in update journey

The following is the JSON Basic configuration

 formConfig = {
         submitBtnName:'Submit',
         clearBtnRequired:true,
         clearBtnText:'Reset',
         formBackgroundColor:'#e0e0e0',
         headerText:'Dynamic Forms',
         headerTextAlign:'center',
         sectionClass:'col-sm-6 col-md-3',
		 containerClass:'container-fluid'
     }

 fieldConfig = [
    {
	     name:'firstname',
	     label:'First Name',
	     placeholder:'Enter First Name',
	     required:false,
	     requiredMsg:'Please enter first name',
	     pattern:'[a-zA-Z0-9]+',
	     patternMsg:'Select Valid Name',
	     type:'text',
	     disabled:false
     },
     {
	     name:'lastname',
	     placeholder:'Enter Last Name',
	     label:'Last Name',
	     required:true,
	     requiredMsg:'Please enter last name',
	     pattern:'',
	     patternMsg:'',
	     type:'text',
	     disabled:false,
	  },
	  {
		  name:'class',
		  placeholder:'Select class',
		  label:'Class',
		  required:true,
		  requiredMsg:'Please select class',
		  type:'dropdown',
		  options: ['8','9','10'],
		  disabled:  false
	  },
	  {
		  name:'dateofbirth',
		  label:'Date of Birth',
		  placeholder:'dd/mm/yyyy',
		  required:true,
		  requiredMsg:'Select Date of birth',
		  type:'date',
		  disabled:false
	   },
	   {
		   name:'gender',
		   label:'Gender',
		   required:true,
		   requiredMsg:'Please select Gender',
		   type:'radio',
		   options: ['male','female','others'],
		   disabled:  false
	   },
	   {
		   name:  'state',
		   label:  'State',
		   required:  true,
		   requiredMsg:  'Please select State',
		   type:  'checkbox',
		   options: [
			 {key:'AP', value:'ap',isChecked:false },
		     {key:'Karnataka', value:'karnataka',isChecked:false },
			 {key:'Tamil nadu', value:'tamilnadu',isChecked:false },
		 	 {key:'Kerala', value:'kerala',isChecked:false },
		 	 ],
		   disabled:  false,
		 },
		 {
				name:'address',
				label:'Address',
				placeholder:'Enter Address',
				required:  true,
				requiredMsg:'Enter Address',
				pattern:'',
				patternMsg:'',
				type:'textarea',
				disabled:false,
				rows:3
		 },
		 {
			 name:'file',
			 label:'File',
			 placeholder:'Select file',
			 required:true,
			 requiredMsg:'Please select a file',
			 type:'file',
			 disabled:false
		 }
	]

Journey = "create" or "update"

 dataToUpdate = dataToUpdate = {
                  "firstname":  "nizam",
                  "lastname":  "shaik",
                  "class":  "8",
                  "age":  "24",
                  "dateofbirth":  "1990-01-05",
                  "gender":  "male",
                  "state": [
                     {
                       "key":  "Nellore",
                       "value":  "nellore",
                       "isChecked":  true
                     },
                     {
                        "key":  "Kadapa",
                        "value":  "kadapa",
                        "isChecked":  true
                      }
                   ],
                  "address":  "buchi reddy palem",
           "file": {
             "0": {}
                }
             }

Credits

Author && Developer : Nizamuddin shaik

License

Mit License: http://www.opensource.org/licenses/mit-license.php