@b2allsolution/factory

B2All Factory Library

B2All Factory Library is Angular library that generate form based on configuration.

Prerequisite

Angular 12 and above

Recommended

Bootstrap 5.1.3

Installation

npm install @b2allsolution/factory

Usage

Import B2allDynamicFormModule into app.module or selected module.

Add ProgressSpinnerService into providers if button is used in configuration.

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    // import B2allDynamicFormModule
    B2allDynamicFormModule,
  ],
  providers: [
    // add ProgressSpinnerService if button is used
    ProgressSpinnerService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Example:

HTML :

<b2all-dynamic-form
  #dynamicForm="b2allDynamicForm"
  [inputFormConfigs]="config"
  [inputSavedData]="savedData"
  [inputFormName]="'form_name'"
  (formOnSubmit)="formOnSubmit($event)"
>
</b2all-dynamic-form>

Typescript :

this.config: IFieldConfig[] = [
  {
    name: 'full_name',
    display_text: 'Full name: ',
    type: EFieldConfigType.Input,
    validation_fn: getValidators([{ type: EFormValidator.Required }]),
    type_config: {
      type: EFieldConfigInputType.Text,
      list: false,
      css_class: {
        group: 'form-group mb-3',
        group_label: '',
        input: 'form-control',
        input_label: 'mb-1',
      },
    },
    css_class: 'col-12',
  },
];

this.savedData = {
  full_name: 'Daniel'
};

formOnSubmit(formValue: any): Promise<void> {
  console.log(formValue);
}

IFieldConfig Configuration

Key	Type	Description
name?	string	Name of the field to be store into database as the field name
display_text?	string	Display Text for label
value?	any	Value of this control, only for single object
validation_fn?	ValidatorFn[]	Validation for this control
async_validation_fn?	AsyncValidatorFn	Async validation for this control
disabled?	boolean	Disabled field (disabled field will not be store when submit)
index?	number	For field sorting
css_class?	string	For css class
type	EFieldConfigType	Indicate field type
type_config	*	Futher configuration for specific type (detail is at below)

type_config Configuration

Input

Key	Type	Description
readonly?	boolean	Control become readonly (undefined to disabled readonly)
type?	EFieldConfigInputType	Input type
list?	boolean	For Checkbox and Radio list
dataset?	IKeyValueInString[]	When list is true, this field is use
input_helper?	boolean	?
single_checkbox_display_text?	string	When list is false and is Checkbox, text will display beside checkbox
css_class?	*	Css class
placeholder?	string	Placeholder (Optional, if this field has value, display_text will not be shown)

Button

Key	Type	Description
type	'button' / 'submit'	Button type
onclick_fn	() => Promise	Click Event
loading_text?	string	Loading Text
css_class?	*	Css class

Select

Key	Type	Description
dataset	IMultiSelect[]	Select Dataset
controls	[*]	Select control
css_class	*	CSS class

Array

Key	Type	Description
hierarchy_level?	IMultiSelect[]	hierarchy
field_configs	IFieldConfig[]	FieldConfig
css_class	*	CSS class
table_column_names?	string[]	Configuration for recursive enabled template
table_column_width?	string[]	table column width
table_caption?	string	table caption
enable_default_options?	IKeyValueInString[]	default value
hideAddButton?	boolean	hide add button flag
hideRemoveRowItemButton?	boolean	hide remove row item button flag

Object

Key	Type	Description
field_configs	IFieldConfig[]	FieldConfig
css_class	*	CSS class

Textarea

Key	Type	Description
row_count	number	Number of row
col_count?	number	Number of column
readonly	boolean	Read Only flag
css_class	*	CSS class
placeholder	string	placeholder

Select controls Configuration

Key	Type	Description
name	number	Name of the control
type?	'select' / 'datalist	Type of the control
label?	string	Label for the field
key_field	string	Key's field name of the dataset
value_field	string	Value's field name of the dataset
value	string	value
validation_fn	string	Validation for the selected field
disabled	string	Disabled selected control
placeholder	string	placeholder for the control

No type_config needed

RadioButtonDefault, Divider

css_class Configuration

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT