@sgng/dyn-forms

@sgng/dyn-forms

'@sgng/dyn-forms' is an npm package tailored for Angular projects. It offers Angular components, an interface, and an enum to simplify the creation of forms encompassing various input types like text, number, and select. These input types seamlessly integrate with Angular's data-binding functionality. The package dynamically renders forms in the browser by accepting input field metadata or an array thereof.

Table of contents

• Supported Input Fields
• Properties
  • Common
  • Specific for each input types
• Installation
• Setup
• Usage/Examples
  • Import Statement
  • Single Input Field
  • Input Fields Array
  • Managing Input Field Values
• Bug Reports or Feature Requests
• Developers
• Support

Supported Input Fields

Input Type	Version	Desctiptions
Checkbox	1.0.0	Checkbox buttons let a user select one or more options of a limited number of choices.
Color	1.0.0	Used for input fields that should contain a color. Depending on browser support, a color picker can show up in the input field.
DataList	1.0.0	Provide a list of pre-defined options for an input element.
Date	1.0.0	Used for input fields that should contain a date. Depending on browser support, a date picker can show up in the input field.
Datetime	1.0.0	Specifies a date and time input field, with no time zone. Depending on browser support, a date and time picker can show up in the input field.
Email	1.0.0	Used for input fields that should contain an e-mail address. Depending on browser support, the e-mail address can be automatically validated when submitted. Some smartphones recognize the email type, and add ".com" to the keyboard to match email input.
File	1.0.0	Defines a file-select field and a "Browse" button for file uploads. Don't support two-way data-binding functionality.
Month	1.0.0	Allows the user to select a month and year. Depending on browser support, a month picker can show up in the input field.
Number	1.0.0	Defines a numeric input field.
Password	1.0.0	Defines a password input field.
Radio	1.0.0	Radio buttons let a user select only one of a limited number of choices.
Range	1.0.0	Defines a control for entering a number whose exact value is not important (like a slider control).
Select	1.0.0	Define the available options in the drop-down list.
Tel	1.0.0	Used for input fields that should contain a telephone number.
Text	1.0.0	Defines a single-line text input field.
Textarea	1.0.0	Defines a multi-line text input control
Time	1.0.0	Allows the user to select a time (no time zone). Depending on browser support, a time picker can show up in the input field.
URL	1.0.0	Used for input fields that should contain a URL address.
Week	1.0.0	Allows the user to select a week and year. Depending on browser support, a week picker can show up in the input field.

Properties

(*) marked properties are required.

Common

The below properties are common for all the input types.

Name	Version	Data Type	Default Value
id*	1.0.0	string
type*	1.0.0	InputType
label	1.0.0	string	'' (empty string)

Specific for each input types

Checkbox

Name	Version	Data Type	Default Value
options*	1.0.0	string[]	[] (empty string array)
value	1.0.0	string[]	undefined

Color

Name	Version	Data Type	Default Value
value	1.0.0	string	undefined

DataList

Name	Version	Data Type	Default Value
options*	1.0.0	string[]	[] (empty string array)
value	1.0.0	string	undefined

Date

Name	Version	Data Type	Default Value
value	1.0.0	Date	undefined

Datetime

Name	Version	Data Type	Default Value
value	1.0.0	Date	undefined

Email

Name	Version	Data Type	Default Value
value	1.0.0	string	undefined

File

Name	Version	Data Type	Default Value
value	1.0.0	File	undefined

Month

Name	Version	Data Type	Default Value
value	1.0.0	string	undefined

Number

Name	Version	Data Type	Default Value
value	1.0.0	number	undefined

Password

Name	Version	Data Type	Default Value
value	1.0.0	string	undefined

Radio

Name	Version	Data Type	Default Value
options*	1.0.0	string[]	[] (empty string array)
value	1.0.0	string	undefined

Range

Name	Version	Data Type	Default Value
min*	1.0.0	number
max*	1.0.0	number
value	1.0.0	number	undefined
step	1.0.0	number	1

Select

Name	Version	Data Type	Default Value
options*	1.0.0	string[]	[] (empty string array)
value	1.0.0	string	undefined

Tel

Name	Version	Data Type	Default Value
value	1.0.0	string	undefined

Text

Name	Version	Data Type	Default Value
value	1.0.0	string	undefined

Textarea

Name	Version	Data Type	Default Value
value	1.0.0	string	undefined

Time

Name	Version	Data Type	Default Value
value	1.0.0	string	undefined

URL

Name	Version	Data Type	Default Value
value	1.0.0	string	undefined

Week

Name	Version	Data Type	Default Value
value	1.0.0	string	undefined

Installation

With npm:

npm install @sgng/dyn-forms

Setup

Import the DynFormsModule from the @sgng/dyn-forms package into the module file.

app.module.ts

...
import { DynFormsModule } from  '@sgng/dyn-forms';
...

@NgModule({
	declarations: [...],
	imports: [
		...
		DynFormsModule,
		...
	],
	providers: [...],
	bootstrap: [...]
})
export  class  AppModule { }

Usage/Examples

Import Statement

Imports FormItem and InputType from the @sgng/dyn-forms library into the component file.

app.component.ts

import { FormItem, InputType } from  "@sgng/dyn-forms";

Single Input Field

1. Define a Property:

   • In your component file, define a property named inputField with the type FormItem<InputType.TEXT>. This indicates it is a FormItem with a specific InputType such as TEXT.

2. Initialize the Property:

   • Initialize the inputField property as an object with the relevant properties. Refer to the Properties section for the common and specific properties for each input type:
     • Set the type property to match the type specified for inputField, e.g., type: InputType.TEXT.
     • Add other required and optional properties with appropriate values as detailed in the Properties section.

app.component.ts

export class AppComponent {
	...
	inputField: FormItem<InputType.TEXT> = {
		type: InputType.TEXT,
		id: 'formItem'
	};
	...
}

3. Use the Custom Component:
   • In your HTML file, use the <sgng-form-item> custom component provided by the @sgng/dyn-forms library.
   • Bind the inputField property of your component class to the item input property of the <sgng-form-item> component using property binding.

app.component.html

<sgng-form-item [item]="inputField"></sgng-form-item>

Input Fields Array

1. Define a Property:

   • In your component file, define a property named inputFields with the type FormItem<InputType>[]. This indicates it is an array of FormItem objects, each with a type from the InputType enumeration.

2. Initialize the Property:

   • Initialize the inputFields property as an array containing multiple form item objects with their relevant properties:
     • Set the type property of each form item object to an item from the InputType enumeration, e.g., type: InputType.TEXT or type: InputType.NUMBER.
     • Add other required and optional properties with appropriate values as detailed in the Properties section.

app.component.ts

export class AppComponent {
	...
	inputFields:  FormItem<InputType>[] = [{
		type:  InputType.TEXT,
		id:  'textInput'
	}, {
		type:  InputType.NUMBER,
		id:  'numberInput'
	}];
	...
}

3. Use the Custom Component:
   • In your HTML file, use the <sgng-form-item> custom component provided by the @sgng/dyn-forms library.
   • Bind the inputFields property of your component class to the items input property of the <sgng-form-item> component using property binding.

app.component.html

<sgng-form-item [item]="inputField"></sgng-form-item>

Managing Input Field Values

Utilize the value property to retrieve or assign values to the input field(s).

Bug Reports or Feature Requests

Help us provide you with better service. Click here to submit a Bug Report or Feature Request form.

Developers

Subhendu Ghosh

Support

If you find this project useful and would like to support its development, please consider making a small donation. Your contributions help maintain and improve the project for everyone.

Thank you for your support!