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 passdataToUpdate
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 methodonSubmit()
on the eventformValues
PassJourney
to the library passdataToUpdate
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