@sgng/dyn-forms v1.0.0

@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

Properties

(*) marked properties are required.

Common

The below properties are common for all the input types.

Specific for each input types

Checkbox

Color

DataList

Date

Datetime

Email

File

Month

Number

Password

Radio

Range

Select

Tel

Text

Textarea

Time

URL

Week

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!