ng-sys-form v1.0.2

ng-sys-form is a rapid form development library for angular meant to help make normal HTML forms more dynamic and which has components to help customize and render JSON configured forms.

Features

• Automatic forms generation.
• Easy to extend with custom field type, validation, wrapper and extension.
• Support JSON Schema.
• Custom themes.
• Custom functions for input's change event and button click event.
• Support to add dynamic single/multiselect dropdown with search and select all options.
• Support to specify custom validation error messages.
• Support custom disable of each input with custom disable CSS class.
• support custom input styling.

Installation

npm i ng-sys-form --save

Import

1. Import NgFormModule into your app.module.ts :

import { NgFormModule } from 'ng-sys-form';

@NgModule({

 imports:  [NgFormModule]

})

export  class  AppModule  {}

3. Include bootstrap:

Include below bootstrap CSS link into your index.html

<link  rel="stylesheet"  href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"  integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"  crossorigin="anonymous">

or

npm install bootstrap --save

to import the CSS from Bootstrap that was installed from NPM:

1: Configure angular.json:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  ...
]

2: Import directly in src/style.css or src/style.scss:

@import '~bootstrap/dist/css/bootstrap.min.css';

3. Define your form model:

import { FormFieldConfig } from  "ng-sys-form";
public  FormFieldConfig: FormFieldConfig[] = [
{
	controlName:  "Username",
	inputType:  "input",
	className:  "customUser",
	labelName:  "UserName",
	controlType:  "text",
	placeholder:  "Enter username",
	validators: {
	   required:  true,
	   minlength:  5,
	   maxlength:  7,
	   messages: {
		required: "Please enter the user name.",
		minlength: "User Name should be minimum 5 characters.",
		maxlength: "User Name should not be more than 7 characters.",
	  },
	},
},
{
	controlName:  "Password",
	inputType:  "input",
	className:  "",
	labelName:  "Password",
	controlType:  "password",
	placeholder:  "Enter Password",
	validators: {
		required:  true,
		minlength:  5,
	},
},
{
	controlName:  "Number",
	inputType:  "number",
	labelName:  "Number",
	controlType:  "number",
	placeholder:  "Enter number",
	validators: {
		required:  true,
		min:  0,
		max:  10,
	},
},
{
	controlName:  "Address",
	placeholder:  "Enter Address",
	controlType:  "textarea",
	inputType:  "textarea",
	validators: {
		required:  true,
		minlength:  10,
		maxlength:  250,
	},
	rows:  5,
	cols:  2,
	event: (e) =>  this.textAreaChange(e),
},
{
	controlName:  "Email",
	controlType:  "email",
	placeholder:  "Enter email",
	inputType:  "input",
	validators: {
		required:  true,
		pattern: "^[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$",
	},
	disabled: true,
    disableClass: "btnBackground",
},
{
	controlName:  "Single Select",
	placeholder:  "Select an item",
	inputType:  "select",
	configDropDown: {
		displayKey:  "name",
		search:  true,
		height:  "auto",
		placeholder:  "Select",
		limitTo:  3,
		moreText:  "more",
		noResultsFound:  "No results found!",
		searchPlaceholder:  "Search",
		searchOnKey:  "name",
		clearOnSelection:  false,
		disabled:  false,
		multiple:  false
	},
	options:  this.options,
	validators: {
		required:  true,
	},
	event: (e) =>  this.selectionChanged(e),
},
{
	controlName:  "Vehicle you own",
	placeholder:  "Select vehicle",
	inputType:  "radio",
	currentValue: "car",
	options: [
	{
		optionName:  "I have a bike",
		value:  "bike",
		id: 1
	},
	{
		optionName:  "I have a car",
		value:  "car",
		id: 2
	},
	],
	validators: {
		required:  true,
	},
	configRadio:{
	    displayKey: "optionName",
        uniqueKey: "id",
	}
},
{
	controlName:  "Multiselect",
	placeholder:  "Select items",
	inputType:  "select",
	configDropDown: {
		displayKey:  "name",
		search:  true,
		disabled:  false,
		disableClass:"dropdownDisable"
		multiple:  true,
		enableCheckAll:  true,
		selectAllText:  "Select All",
		unSelectAllText:  "Unselect All",
		height:  "auto",
		placeholder:  "Select",
		limitTo:  3,
		moreText:  "more",
		noResultsFound:  "No results found!",
		searchPlaceholder:  "Search",
		searchOnKey:  "name",
		clearOnSelection:  false,
	},
	options:  this.multiselectOptions,
	validators: {
		required:  true,
	},
	event: (e) =>  this.selectionChangedMultiselect(e),
},
{
	controlName:  "Checkbox",
	inputType:  "checkbox",
	controlType:  "checkbox",
	labelName:  "Active",
},
{
	controlName:  "submit",
	inputType:  "button",
	controlType:  "submit",
	labelName:  "Submit",
	inputClass:  "btnBackground",
	disable: true,
	disableClass: "btnDisable"
},
{
	controlName:  "Reset",
	inputType:  "button",
	controlType:  "reset",
	labelName:  "Reset",
	event: () =>  this.reset(),
},
];

Usage

Add below tag in app.component.html

<ng-sys-form
[FormFieldConfig]="FormFieldConfig"
[column]="col"
(formSubmit)="onSubmit($event)"
>
</ng-sys-form>

with NgFormComponent in app.component.ts :

import { Component, ViewChild, OnInit} from "@angular/core";
import { FormFieldConfig, NgFormComponent } from "ng-sys-form";

export class AppComponent implements OnInit {
title = "app";

@ViewChild(NgFormComponent, { static: false })
form: NgFormComponent;

col = "col-md-6";

public FormFieldConfig: FormFieldConfig[] = [
{
	controlName: "Username",
	inputType: "input",
	className: "customUser",
	...
}
]

multiselectOptions = [];
options = [
{
	_id:  "5a66d6c31d5e4e36c7711b7a",
	name:  "Fruit",
},
{
	_id:  "5a66d6c3657e60c6073a2d22",
	name:  "Animal",
}
];

items = [
{
	_id:  "5a66d6c31d5e4e36c7711b7a",
	balance:  "$2,806.37",
	name:  "Banana",
},
{
	_id:  "5a66d6c31d5e4e36c7711b7a",
	balance:  "$2,984.98",
	name:  "Apple",
},
{
	_id:  "5a66d6c3657e60c6073a2d22",
	balance:  "$2,794.16",
	name:  "Wolf",
},
{
	_id:  "5a66d6c3657e60c6073a2d22",
	balance:  "$2,141.42",
	name:  "Fox",
}
];

get  f() {
	return  this.form.form;
}

selectionChanged(e) {
	console.log(e.value);
	let  data = e.value;
	if (this.items != null) {
	this.multiselectOptions = this.items.filter((f) =>  f._id == data._id);
		this.FormFieldConfig.map((m) => {
			if (m.controlName == "Multiselect") {
				m.options = this.multiselectOptions;
			}
		});
	} else {
		this.multiselectOptions = [];
		this.FormFieldConfig.map((m) => {
			if (m.controlName == "Multiselect") {
				m.options = this.multiselectOptions;
			}
		});
	}
}

selectionChangedMultiselect(e) {
	console.log(e.value);
}

onSubmit(form?: NgForm) {
	console.log(form, this.form);
}

textAreaChange(e) {
	console.log(e);
}
reset() {
	if (this.form != null) {
		this.f.controls['Single Select'].setValue([]);
      	this.f.controls['Multiselect'].setValue([]);
      	this.f.controls["Username"].setValue("Welcome");
      	this.f.reset();
	}
}

Settings

1. inputs :

[FormFieldConfig] - specify JSON config data of Form controls.

[column] 	  - used to specify custom css class like col-md-12 or col-md-6 that will change style css class for each input controls.

2. Output :

(formSubmit) - Method to return submitted dynamic form data.

3. FormFieldConfig model :

FormFieldConfig {
	inputType: string;
	controlName: string;
	controlType?: string;
	className?: string;
	labelName?: string;
	currentValue?: string;
	placeholder?: string;
	options?: Array<any>;
	validators?: {
		required?: boolean;
		minlength?: number;
		maxlength?: number;
		pattern?: string;
		min?: number;
		max?: number;
		messages?: {
			required?: string;
			minlength?: string;
			maxlength?: string;
			pattern?: string;
			email?: string;
			min?: string;
			max?: string;
		};
	};
	configDropDown?: {
		displayKey?: string;
		search?: boolean;
		height?: string;
		placeholder?: string;
		limitTo?: number;
		moreText?: string;
		noResultsFound?: string;
		searchPlaceholder?: string;
		searchOnKey?: string;
		clearOnSelection?: boolean;
		inputDirection?: string;
		multiple: boolean;
		disabled: boolean;
		disableClass?:boolean;
		enableCheckAll?: boolean;
		selectAllText?: string;
		unSelectAllText?: string;
	};
	rows?: number;
	cols?: number;
	event?: any;
    inputClass?: string;
  	disabled?: boolean;
  	disableClass?: string;
  	configRadio?: {
    	displayKey?: any;
    	uniqueKey?: any;
    	inputClass?: string;
    	labelClass?: string;
  	};
}

3. Definition of FormFieldConfig :

• Declare custom css classes in styles.css.

• inputType and controlName are mandatory field for configuration json.

• Setting of inputType has following values :

input / number / select / radio / checkbox / button / textarea

• Based on inputType controlType needs to be specified :

If inputType : input

controlType : text / number / password / email

If inputType : button

controlType : submit / reset

4. Validator settings :

5. Messages settings :

6. Dropdown config settings :

7. Radio button config settings :