**@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 int
npm install @sgng/dyn-formsinput element.|
string||
InputType||
string|undefined|
string[]|[] (empty string array)|
string[]|undefined|
string[]|undefined|
string|undefined|
boolean|undefined|
string[]|[] (empty string array)|
string|undefined|
boolean|undefined|
Date|undefined|
Date|undefined|
Date|undefined|
boolean|undefined|
Date|undefined|
Date|undefined|
Date|undefined|
boolean|undefined|
string|undefined|
boolean|undefined|
File|undefined|
string|undefined|
boolean|undefined|
string|undefined|
string|undefined|
string (Format: YYYY-MM)|undefined|
boolean|undefined|
number|undefined|
number|undefined|
number|undefined|
number|undefined|
boolean|undefined|
string|undefined|
boolean|undefined|
string[]|[] (empty string array)|
string|undefined|
string[]|undefined|
number||
number||
number|undefined|
number|1|
boolean|undefined|
string[]|[] (empty string array)|
string|undefined|
boolean|undefined|
string|undefined|
boolean|undefined|
string|undefined|
boolean|undefined|
string|undefined|
boolean|undefined|
string|undefined|
boolean|undefined|
string|undefined|
boolean|undefined|
string|undefined|
string|undefined|
string (Format: YYYY-Www)|undefined|
boolean|undefined|
ps1
npm install @sgng/dyn-forms
`
Setup
Import the FormItemComponent from the @sgng/dyn-forms package.
app.ts
`ts
...
import { FormItemComponent } from '@sgng/dyn-forms';
...
@Component({
selector: ...,
imports: [FormItemComponent],
templateUrl: ...,
styleUrl: ...
})
export class AppComponent { }
`
Usage/Examples
Import Statement
Imports FormItem and InputType from the @sgng/dyn-forms library into the component file.
app.ts
`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. 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.ts
`typescript
export class AppComponent {
...
inputField: FormItem = {
type: InputType.TEXT,
id: 'formItem'
};
...
}
`
3. Use the Custom Component:
- In your HTML file, use the custom component provided by the @sgng/dyn-forms library.
- Bind the inputField property of your component class to the item input property of the component using property binding.
app.html
`html
`
Input Fields Array
1. Define a Property:
- In your component file, define a property named inputFields with the type FormItem. 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.ts
`typescript
export class AppComponent {
...
inputFields: FormItem[] = [
{
type: InputType.TEXT,
id: 'textInput'
},
{
type: InputType.NUMBER,
id: 'numberInput'
}
];
...
}
`
3. Use the Custom Component:
- In your HTML file, use the custom component provided by the @sgng/dyn-forms library.
- Bind the inputFields property of your component class to the items input property of the component using property binding.
app.html
`html
`
Managing Input Field Values
Utilize the value property to retrieve or assign values to the input field(s).
Bootstrap Styling
1. Add @ng-bootstrap Package
- Ensure that the @ng-bootstrap package is installed and used in your project. You can refer to the documentation for more details here.
2. Import the directive:
- Imports BootstrapDirective class from the @sgng/dyn-forms library into the component file.
app.ts
`ts
...
import {
...,
BootstrapDirective
} from '@sgng/dyn-forms';
...
@Component({
selector: ...,
imports: [
...,
BootstrapDirective
],
templateUrl: ...,
styleUrl: ...
})
export class AppComponent { }
`
3. Use the directive:
- Use the sgngBootstrap directive with the custom tag.
- The directive supports both a single input field and an array of input fields.
app.html
`html
``