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 :

| Settings | Type | Description | | -------------- | :--------- | :-------------------------------------------------------------------------------------------------------- | | inputType | string | Custom values of inputType : input / number / select / radio / checkbox / button / textarea | | controlName | string | This is used to specify control name of each inputs. | | controlType | string | Used to specify which type of input like text / number / password / email / button / submit / reset | | className | string | Specify custom css class name. | | labelName | string | Specify the label name for input field. | | currentValue | string | Specify to set value/default value for input field. | | placeholder | string | Used to specify placeholder text. | | options | Array | Array of items for single/multiselect dropdown and radio inputs. | | validators | object | Used to specify custom validators and custom validation messages. | | configDropDown | object | Used to specify configuration settings for single/multiselect dropdown. | | rows | number | Used to specify rows value of textarea input. Default value is 3. | | cols | number | Used to specify cols value of textarea input. Default value is 3. | | event | methed | Support to specify used defined functions for change and click events. | | inputClass | string | Support to specify used defined css class name for each input design. | | disabled | boolean | Used to specify disable/enable each input. | | disableClass | string | Support to specify used defined css class name for each input disable design. | | configRadio | object | Support to specify radio button option's unique key, displayKey, input css class. |

• 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 :

| Settings | Type | Description | | --------- | :------ | :-------------------------------------------------------------- | | required | boolean | true/false for input control is required or not. | | minlength | number | number to validate minimum length of values entered. | | maxlength | number | number to validate maximum length of values entered. | | pattern | string | used to specify custom regx pattern. | | min | number | number to validate minimum number of input type number input. | | max | number | number to validate maximum number of input type number input. | | messages | object | used to specify custom validation messages for each validators. |

5. Messages settings :

| Settings | Type | Description | | --------- | :----- | :------------------------------------------------------------------------ | | required | string | Specify validation error message of input required. | | minlength | string | Specify validation error message of minimum characters length. | | maxlength | string | Specify validation error message of maximum characters length. | | pattern | string | Specify validation error message for specified pattern. | | email | string | Specify validation error message for email feild. | | min | string | Specify validation error message for minimum number of input type number. | | max | string | Specify validation error message for maximum number of input type number. | |

6. Dropdown config settings :

| Settings | Type | Description | | ----------------- | :------ | :----------------------------------------------------------------------------------------------------------------------------------------- | | displayKey | string | if objects array passed which key to be displayed defaults to description. | | search | boolean | true/false for the search functionlity defaults to false. | | height | string | height of the list so that if there are more no of items it can show a scroll defaults to auto. With auto height scroll will never appear. | | placeholder | string | text to be displayed when no item is selected defaults to Select. | | limitTo | number | A number thats limits the no of options displayed in the UI similar to angular's limitTo pipe. | | moreText | string | text to be displayed when more than one items are selected like Option 1 + 5 more. | | noResultsFound | string | text to be displayed when no items are found while searching. | | searchPlaceholder | string | label thats displayed in search input. | | searchOnKey | string | key on which search should be performed this will be selective search. if undefined this will be extensive search on all keys. | | clearOnSelection | boolean | Clears search criteria when an option is selected if set to true, default is false. | | multiple | boolean | true/false based if multiple selection required or not Defaults to false. | | disabled | boolean | disabled attribute to disable the dropdown when required | | disableClass | string | disabled CSS class name for dropdown | | enableCheckAll | boolean | Enable the option to select all items in list. | | selectAllText | string | Text to display as the label of select all option. | | unSelectAllText | string | Text to display as the label of unSelect option. |

7. Radio button config settings :

| Settings | Type | Description | | ---------- | :----- | :------------------------------------------------------------------- | | displayKey | any | If objects array passed which key to be displayed defaults to label. | | uniqueKey | any | Used to specify key to identify a unique value. | | inputClass | string | Used to specify radio button input css class. | | labelClass | string | Used to specify radio button label css class. |