1.0.7 • Published 2 years ago
ng-json-powered-form v1.0.7
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: "amarr@gmail.com",
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